Eww bar squished together and some missing elements(Arch noob here!)

[Knox-Radox]

Running arch linux as dual boot and overcame some issue in downloading eww-git(key issues) so installed it through eww, ran into issue with installing xorg too(error installing repo packages) so installed it directly from the website and systematically installed through the script with no issues but the eww bar seems to be squished together with poweroff elements missing(screenshot attached below). Is there a way to fix this? Thanks in advance! huge fan of your work...

[awarewen]

Hi.This is a matter of resolution scaling. Leave your screen resolution here if you need it, and I'll let you know where to change it to the appropriate resolution. For some reason EWW is not yet able to adapt the layout to the resolution (maybe in the future, but there is no good solution at the moment)

quickly fix:

Config File	Name	Command
eww.yuck	bar_left:	eww -c ~/.config/eww/mybar open bar_left
eww.yuck	bar_center:	eww -c ~/.config/eww/mybar open bar_center
eww.yuck	bar_right:	eww -c ~/.config/eww/mybar open bar_right
polybar_tray.ini	polybar_tray:	polybar -c ~/.config/eww/mybar/polybar_tray.ini tray

All Config PATH: ~/.config/eww/mybar/*
In this dot, the EWW Bar consists of the four sections above.

step 1 -- Change the Polybar Tray size and position（～/.config/eww/mybar/polybar_tray.ini):

;; (available in px and%,defualt is px) 
width = 200   ;; Tray width
height = 40    ;; Tray width
offset-x = 1675  ;; The position of the leftmost pixel of the tray relative to the screen resolution
offset-y = 25      ;; The position of the top pixel of the tray relative to the screen resolution
tray-offset-x = 20  ;; The x axis offset value
;; tray on the left side of the final location = offset-x + tray-offset-x

step 2: Change the location and size of the EWW Bar (~/.config/eww/mybar/eww.yuck)
Because of the EWW itself, there are a lot of things that need to be changed here, including the size and location of each part element

E.G. : bar_left
This is where it was before the change:

My resolution: 1920X1200

Suppose I have a resolution of 960x1200:

1. Open eww.yuck find the bar_left

:x "1%"
:y "1.5%"
:width "11%"
:height "4%"

;; search: image-height
;;:image-height 40
:image-height 20
;;:image-width 40
:image-width 20

2. Open eww.scss
   Change the size of the related element

.workspace_buttons：

//font-size: 30px;
font-size: 15px;

.layout:

//font-size: 25;
font-size:15;

.media_title:

//font-size: 16px;
font-size: 8px;

.bar_normal scale trough {

//min-width: 173px;
min-width: 86px;

This is not perfect, of course, and the margins of each element can be fine-tuned.

[awarewen]

You may also need to adjust the height of the application window, which is the height BSPWM leaves for the EWW bar at the top of the screen:

Open ~/.config/bspwm/bspwmrc

#bspc config top_padding          70
bspc config top_padding          50 # or other

[ikz87]

I just wanna mention that the screenshot at the top made me realize that the left bar was one pixel taller than the other two, fixed it now in 64d2b22

But yeah, sadly eww (and other programs used in my rice) provides no real way to make a 100% adaptive configuration for different screen sizes.

That's why in the README I say:

Please note that this rice was made for a single 1080p monitor setup, If you have anything different than that you'll have to tweak some things on your own.

As for the missing elements, they're not really missing, it's just that the central bar is covering them on the right bar (also due to screen resolution)

Thanks @awarewen for providing a list of everything that needs to be changed regarding eww

Will be closing as I think the instructions are clear but you're free to reopen the issue if you need more help