[FEATURE] Have a max height property

[kStor2poche]

Description of the requested feature

Hi, just so you know, I'm currently using the eww-tray-wayland-git AUR package (which uses this fork) though I think that's more of a general eww issue.

Or maybe that's just a skill issue from me, which I'd be glad to hear.

While I can restrict height of some boxes using padding in scss, I can't seem to do that with a box containing the systray widget and cannot endorse a maximum width or height using the yuck config file nor the scss, whether it is on the box widget or the systray widget directly.
Trying to add padding simply results in padding being added and the window being resized despite having a defined size using the geometry property.

Proposed configuration syntax

Maybe have that be the default behavior of width and height or add a max-width and max-height parameter like that :

(defwidget some_widget []
    (box :max-height "10px"
        "I'm a label inside a fixed-height box."
    )
)

Additional context

Here's the normal look of my bar :

and here with 10em padding top and bottom on the box containing the systray widget :

you can also notice that the method that consists in adding padding to the cpu, ram and bat circles works well when the systray's margin isn't bigger

Here's my yuck and scss, if that ever helps

eww.yuck

;; declare variables
(defpoll time :interval "5s"
`date +'{"hour":"%H","min":"%M"}'`
)

;; powermenu (include './powermenu.yuck')

;; statusbar (include './statusbar.yuck')

> statusbar.yuck
```elisp
;; TODO: have a scratchpad widget that appears only if there's a window there !

(defwindow statusbar
    :monitor 0
    :stacking "fg"
    :exclusive true
    :namespace "eww-statusbar"
    :geometry (geometry :height "1%" 
                        :width "100%"
                        :anchor "top center" 
              )
    (bar_layout)
)

(defwidget bar_layout []
    (box
        :class "sbar"
        :space-evenly true ;; false doesn't let center stay at the global center, weirdly enough
        :hexpand true
        :vexpand true
        (bar_left
        )
        (bar_middle
        )
        (bar_right
        )
    )
)

;;                      ;;
;; Left side of the bar ;;
;;                      ;;
(defwidget bar_left []
    (box :class "sbar-left"
         :halign "start"
         :space-evenly false
         :hexpand true
         :vexpand true
         (workspaces :array workspacesArray)
    )
)

;; workspaces

(deflisten workspacesArray :initial "${[1]}"
  `/home/laio/.config/eww/scripts/workspaces.sh`)

(defwidget workspaces [array]
    (box :class "sbar-ws-box"
         :orientation "h"
         :space-evenly false ;; maybe find a better way to have equal space workspace buttons, scss "min-width" could be an option
         :hexpand true
         :vexpand true

         (for entry in array
             (button :onclick `swaymsg workspace "${entry.name}"`
                     :space-evenly false
                     :hexpand true
                     :vexpand true
                     :width 31
                     :class {entry.focused ? "sbar-ws-focused" : "sbar-ws-unfocused"}
                     `${entry.name}`
             )
         )
    )
)

;;                   ;;
;; Center of the bar ;;
;;                   ;;
(defwidget bar_middle []
    (box :class "sbar-middle"
         :space-evenly false
         :hexpand true
         :vexpand true
         :halign "center"
         (window_title)
    )
)

(deflisten windowInfo :initial "Bienvenue !"
    `/home/laio/.config/eww/scripts/windows.sh`
    ;; though sometimes it doesn't work (e.g. when cmus changes track in background, it becomes the output)
)
(defwidget window_title []
    (box :class "sbar-win-title"
         :space-evenly false
         :hexpand true
         :vexpand true
         (label
                 :space-evenly false
                 :hexpand true
                 :vexpand true
                 :limit-width 40
                 :class "sbar-win-title-label"
                 :text "${windowInfo}"
                 ;;:tooltip "${windowInfo}" or sthg similar
         )
    )
)

;;                       ;;
;; Right side of the bar ;;
;;                       ;;
(defwidget bar_right []
    (box :class "sbar-right"
         :space-evenly false
         :hexpand true
         :vexpand true
         :halign "end"
         (cpu)
         (ram)
         (battery)
         (time_date)
         (system_tray)
    )
)

;; CPU utilisation
(defwidget cpu []
    (box :class "sbar-cpu"
         :space-evenly false
         :hexpand true
         :vexpand true
        (circular-progress 
            :class "sbar-cpu-bar"
            :space-evenly false
            :hexpand true
            :vexpand true
            :width 30
            :value {EWW_CPU.avg}
            :start-at 25
            :thickness 2
            "•"
        )
      "cpu"
    )
)

;; RAM utilisation
(defwidget ram []
    (box :class "sbar-ram"
         :space-evenly false
         :hexpand true
         :vexpand true
        (circular-progress 
            :class "sbar-ram-bar"
            :space-evenly false
            :hexpand true
            :vexpand true
            :width 30
            :value {EWW_RAM.used_mem_perc}
            :start-at 25
            :thickness 2
            "•"
        )
      "ram"
    )
)

;; Battery
(defwidget battery []
    (box :class "sbar-bat"
         :space-evenly false
         :hexpand true
         :vexpand true
         :tooltip "${EWW_BATTERY.BAT0.capacity}%"
        (circular-progress 
            :class {EWW_BATTERY.BAT0.status == "Charging" ? "sbar-bat-bar-charging" : "sbar-bat-bar"}
            :space-evenly false
            :hexpand true
            :vexpand true
            :width 30
            :height 19
            :value {EWW_BATTERY.BAT0.capacity}
            :start-at 25
            :thickness 2
            (label :text {EWW_BATTERY.BAT0.status == "Charging" ? "󱐋" : "•"}
                   :space-evenly false
                   :halign "center"
                   :valign "center"
            )
        )
      "bat"
    )
)

;; Time and date
(defpoll timeDate
    :interval "1s"
    :initial "???"
    :run-while time-visible
    "date +%H:%M:%S"
)
(defwidget time_date []
    (box :class "sbar-timedate"
         :space-evenly false
         :hexpand true
         :vexpand true
    "${timeDate}"
    )
)

;; Systray
(defwidget system_tray []
    (box :class "sbar-systray"
         :space-evenly false
         :hexpand false
         :vexpand false
         :max-height 10
        (systray
            :space-evenly false
            :hexpand false
            :vexpand false
            :height 10
        )
    )
)

eww.scss

*:not(menu):not(menuitem):not(tooltip) {
all: unset;
}

@import './colors.scss'; @import './powermenu.scss'; @import './statusbar.scss';

tooltip { background: $color-bg; color: $color-fg; font-family: "SpaceMono Nerd Font Mono"; border-radius: 0; }

> statusbar.scss
```scss
// local variables
$opacity: 1;

// styling
.sbar {
    font-family: "SpaceMono Nerd Font Mono";
    font-size:9.25pt;
    color: $color-fg;
}

.sbar {
    margin-left: 7px;
    margin-top: 7px;
    margin-right: 7px;
}

//
// status bar left
//
.sbar-ws-box button {
    padding: 0.25em 0.5em;
}

.sbar-ws-unfocused {
    background-color: rgba($color-bg, $opacity);
    color: $color-white;
}

.sbar-ws-focused {
    background-color: rgba($color-bg-secondary, $opacity);
    color: $color-fg;
    border-bottom: solid 2px $color-blue;
    border-top: solid 2px rgba($color-bg-secondary, 0); // to fix misalignment issues from border-bottom property
}

//
// statusbar center
//
.sbar-win-title {
    background-color: rgba($color-bg, $opacity);
    padding: 0em 0.5em;
}

//
// statusbar right
//
.sbar-right {
    background-color: rgba($color-bg, $opacity);
}
.sbar-cpu, .sbar-ram, .sbar-bat, .sbar-timedate { 
    padding: 0.5em 0.5em;
}
.sbar-cpu-bar, .sbar-ram-bar, .sbar-bat-bar, .sbar-bat-bar-charging {
    background-color: rgba($color-bg-secondary, $opacity);
}
.sbar-cpu-bar { color: $color-blue; }
.sbar-ram-bar { color: $color-yellow; }
.sbar-bat-bar, .sbar-bat-bar-charging { color: $color-purple; }
//.sbar-bat-bar-charging label { font-size: 5.7pt; margin-left: 0.1em; margin-top: 0.001em; } // doesn't work (sic)
.sbar-systray {
    padding: 0em 0.5em 0em 0;
}

[kStor2poche]

for anyone wondering, I just found out that you can adjust icon size of the systray widget using the corresponding parameter as described here, though I still think an option to have a max-height/width yuck setting could be a good idea to avoid some convolution in the scss files. (Though I guess that may also be a gtk issue with the way they don't want you to control all the sizing aspects from scss ?)

[undefinedDarkness]

Yeah, it's a gtk issue, eww can't really do much from its side, for some widgets you get more flexibility but not generally for most widgets

[kStor2poche]

ok, thanks for confirming that ! I'll just close the issue, then.