[BUG] Widgets Are Stretching The Panel More Than It Needs

[AbbasSrour]

Checklist before submitting an issue

• [X] I have searched through the existing closed and open issues for eww and made sure this is not a duplicate
• [X] I have specifically verified that this bug is not a common user error
• [X] I am providing as much relevant information as I am able to in this bug report (Minimal config to reproduce the issue for example, if applicable)

Description of the bug

The widgets seem to take space on the bar more than they need which in turn makes using effects like slide stretch the bar.

Here is how the widgets are packed:

(defwidget tray []
  (box :orientation "h"
    :space-evenly false
    :halign "end"
    :vexpand false
    :hexpand false
    :class "tray-modules"
    (bluetooth)
    (volume)
    (brightness)
    (wifi)
    (battery)
    (sep)
    (systray)
    (clock)
    (power)))

(defwidget musicWidget []
  (box :orientation "h"
    :halign "fill"
    :vexpand false
    :hexpand false
    :class "music-widget"
    :width 100
    (music)))

(defwidget bar-stuff []
  (box :class "bar-class"
    :orientation "h"
    :vexpand false
    :hexpand false
    (musicWidget)
    (tray)
    ))
(defwindow panel
  :geometry (geometry :x "1%" :y "1%" :width "70%" :height "5%" :anchor "top right")
  :stacking "bg"
  :windowtype "dock"
  :reserve (struts :distance "40px" :side "top")
  :monitor 0
  :space-evenly "false"
  (bar-stuff)
  )

Reproducing the issue

Part of the Configuration For Reproducing: scss:

.volume-icon {
  font-family: "Favorites";
  font-size: $large-fs;
  color: $green;
  margin-right: 0.5rem;
}

.volume-scale trough {
  border-radius: 2rem;
  background-color: $gray;
  box-shadow: 0rem 0rem 0.4rem #141414;
  margin-right: 0.5rem;
}

.volume-scale highlight {
  padding: 0.4rem;
  background: linear-gradient(to left, $green, $green-alt);
  border-radius: 2.0rem;
  margin-right: 0.5rem;
}
progressbar.horizontal > trough {
    min-width: 50px;
}

.bluetooth-icon {
  font-family: "Material Design Icons Desktop";
  font-size: $large-fs;
  color: $red;
  margin-right: 0.5rem;
}

.bluetooth-label {
  font-family: "Proxima Nova";
  font-weight: bold;
  padding: 0rem 0rem 0rem 0rem;
  color: $red;
  font-size: $def-fs;
  margin-right: 0.5rem;
}

yuck:

;; Bluetooth
(defvar bluetooth-reveal false)
(defpoll bluetooth :interval "3s" "scripts/bluetooth -i")
(defpoll bluetooth-state :interval "3s" "scripts/bluetooth -l")

;; Volume
(defvar volume-reveal false)
(defpoll volume-lvl :interval "3s" "scripts/volume -l")

(defwidget bluetooth []
  (eventbox :onhover "/usr/bin/eww -c $HOME/.config/eww/Bar/ update bluetooth-reveal=true"
    :onhoverlost "/usr/bin/eww -c $HOME/.config/eww/Bar/ update bluetooth-reveal=false"
    (box :class "bluetooth-box" :orientation "h" :space-evenly "false" :vexpand false :hexpand false
      (label :class "bluetooth-icon" :text bluetooth)
      (revealer :transition "slideright" :reveal bluetooth-reveal :duration "350ms"
        (label :class "bluetooth-label" :text bluetooth-state )))))

(defwidget volume []
  (eventbox :onhover "/usr/bin/eww -c $HOME/.config/eww/Bar/ update volume-reveal=true"
    :onhoverlost "/usr/bin/eww -c $HOME/.config/eww/Bar/ update volume-reveal=false"
    (box :class "volume-box" :orientation "h" :space-evenly "false" :vexpand false :hexpand false
      (label :class "volume-icon" :text "")
      (revealer :transition "slideright" :reveal volume-reveal :duration "350ms"
        (scale :class "volume-scale" :active true :value volume-lvl :min 0 :max 101 :orientation "h" 
        :onchange 
        "amixer set Master {}% && canberra-gtk-play -f /usr/share/sounds/freedesktop/stereo/audio-volume-change.oga"
        )))))

Idk if I should provide the scripts, maybe using a script that echos a return would be better in this case.

Expected behaviour

The tray using all the empty space before stretching, or the ability to element the extra blank space in widgets, or even preventing the window from stretching all togather.

Additional context

Here is how the bar normally looks, I want to make it a smaller, but its getting stretched anyways:

When I use hover one of the sliders like Bluetooth the tray is stretched although their is enough space

Here is how much space between the space of the end of music and start of the left widget "tray":