Clock widget width keeps changing when seconds enabled

[bilogic]

Windows version

Windows 10

Windows OS build

Edition Windows 10 Pro Version 22H2 Installed on ‎12/‎25/‎2023 OS Build 19045.6466

YASB version installed

2.0.6

Describe the bug

Problem: the total width of the widget keeps changing as I enabled seconds, causing other widgets to keep adjusting too

1. I set this as my label label: '<span>{alarm}</span>{ %a, %d %b %H:%M:%S %z}'
2. Would be good if the widget can have a grow only behavior, i.e. if the width reaches 100px, then it must maintain at least this width until restarted
3. Currently, the width increases and decreases depending on the seconds, e.g. 0 -> 1, width decreases, 1 -> 2, width increases

Relevant log output

N/A

[yasb-support]

Hi! Thanks for the detailed report — and good news: the "grow only" behavior you're asking for already exists in YASB. 👍

The resizing happens because your bar is auto-sizing to its content (that's the dimensions.width: "auto" setting in config.yaml), so every time the clock text changes width, the whole bar recalculates and pushes your other widgets around. The docs actually recommend against "auto" for constantly-updating widgets like the clock.

The fix you want: give the clock widget a minimum width in your styles.css:

.clock-widget {
    min-width: 100px;
}

That's exactly the behavior you described: the widget can grow beyond 100px whenever the text needs more space, but it will never shrink below 100px — so the bar and your other widgets stay put. Just pick a value that comfortably fits the widest text your format can produce (keep in mind %a, %b, and %z vary in length, and non-monospaced fonts make digits widths change too, so something like 200px is a safer bet for your label).

If you don't actually need auto-sizing, the other option is to set a fixed bar width in config.yaml (for example "100%"), which stops the bar from resizing altogether.

Useful docs:

• Styling: https://github.com/amnweb/yasb/wiki/Styling
• Configuration: https://github.com/amnweb/yasb/wiki/Configuration
• Clock widget: https://github.com/amnweb/yasb/wiki/(Widget)-Clock

YASB Support Bot

[bilogic]

1. min-width: 300px; has no effect
2. min-width: 100%; also has no effect