wifi chip: fix off-center icon and drop dead CSS rule

wifi_img.set_hexpand(false) meant the icon packed at the start of the
32px icon-only chip with no leftover space for halign:Center to work
with, sitting visibly left of center on glass-workbench/liquid-motion.
hexpand(true) fixes the centering, but that alone silently bubbles the
expand flag up through connectivity_pair into the shared right-hand
stats box and the centerbox's end slot, blowing the wifi/vol cluster's
layout apart (confirmed via a --screenshot bar capture: the whole
cluster jumped left against the clock with a huge gap before
battery/hamburger). connectivity_pair.set_hexpand(false) pins the
box's own expand explicitly so the fix stays contained to this chip.

Also drops the dead .wifi-pair { padding: 6px } rule: it can never
apply since .stat-pair.icon-only's two-class selector always beats
its one-class specificity regardless of source order, so the intended
padding never actually rendered.
This commit is contained in:
Breadway 2026-08-25 21:05:52 +08:00
parent 55d0e399bd
commit 0a0bd5f431
2 changed files with 29 additions and 3 deletions

View file

@ -718,11 +718,38 @@ impl SimpleComponent for App {
let connectivity_pair = gtk4::Box::new(gtk4::Orientation::Horizontal, 0); let connectivity_pair = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
connectivity_pair.add_css_class("stat-pair"); connectivity_pair.add_css_class("stat-pair");
connectivity_pair.add_css_class("wifi-pair");
connectivity_pair.add_css_class("icon-only"); connectivity_pair.add_css_class("icon-only");
bar_chip(&connectivity_pair); bar_chip(&connectivity_pair);
wifi_img.set_halign(gtk4::Align::Center); wifi_img.set_halign(gtk4::Align::Center);
wifi_img.set_hexpand(false); // `.stat-pair.icon-only` forces a 32px min-width on this box, wider
// than the 24px icon's natural size. Without hexpand, a `gtk4::Box`
// packs a non-expanding child at its natural size flush against the
// start edge and leaves the leftover width trailing after it — so
// `halign: Center` had nothing to center within and the glyph sat a
// few pixels left of true center (reported: wifi icon not centered
// on glass-workbench/liquid-motion). `bat_box` never showed this
// because it isn't `icon-only` — no forced min-width wider than its
// (icon + label) content, so there's no leftover space to
// mis-place. hexpand(true) gives the icon a fillable cell spanning
// the full 32px box, which `halign: Center` then centers within,
// matching `bat_box`'s already-centered result.
//
// A bare `set_hexpand(true)` on the image is not enough on its
// own: GTK4 computes a container's *effective* expand by OR-ing in
// its children's hexpand whenever the container's own hexpand
// hasn't been explicitly set, so the flag silently bubbles up
// through `connectivity_pair` into the shared right-hand stats box
// and from there into the centerbox's end slot — which then hands
// that slot most of the bar's remaining width instead of its
// normal packed size. The visible symptom was dramatic, not
// subtle: the whole vol/wifi cluster jumped left to sit against
// the clock, with a huge dead gap before battery/hamburger, in a
// `--screenshot bar` capture. `connectivity_pair.set_hexpand(false)`
// pins this box's own expand explicitly, which stops the
// computation from climbing any further — the child can still
// fill and center within this one box's fixed 32px cell.
wifi_img.set_hexpand(true);
connectivity_pair.set_hexpand(false);
connectivity_pair.append(&wifi_img); connectivity_pair.append(&wifi_img);
// `connectivity_pair` and `bat_box` are appended in "Assemble" // `connectivity_pair` and `bat_box` are appended in "Assemble"
// below, per `[bar.slots].right`. // below, per `[bar.slots].right`.

View file

@ -249,7 +249,6 @@ fn load_css() -> String {
border-radius: 3px; min-height: 6px; }}\ border-radius: 3px; min-height: 6px; }}\
progressbar.osd-bar trough progress {{ background-image: none; background-color: @accent;\ progressbar.osd-bar trough progress {{ background-image: none; background-color: @accent;\
border-radius: 3px; min-height: 6px; }}\ border-radius: 3px; min-height: 6px; }}\
.wifi-pair {{ padding: 6px; }}\
window.breadbar-panel {{ background-color: alpha(@bg, 0.72); color: @on-bg;\ window.breadbar-panel {{ background-color: alpha(@bg, 0.72); color: @on-bg;\
border-radius: 14px; border: 1px solid alpha(@on-bg, 0.12); }}\ border-radius: 14px; border: 1px solid alpha(@on-bg, 0.12); }}\
window.breadbar-dismiss, .breadbar-dismiss-hit {{\ window.breadbar-dismiss, .breadbar-dismiss-hit {{\