Quat reported the volume UI overlapped with adjacent UI elements in
the Settings panel. The five slider/toggle row helpers
(volume_row × 2, tooltip_delay_row, time_bonus_multiplier_row,
replay_move_interval_row, toggle_row) all used the same flex pattern:
Node {
flex_direction: Row,
align_items: Center,
column_gap: VAL_SPACE_2,
}
with no width constraint and no justify_content. Result: every
child packed against the left edge with 8 px gaps. As the value text
varied in width (e.g. "0.80" → "1.00", or "Instant" vs "1.5 s") the
+/− buttons shifted sideways frame to frame, and on narrow windows
the row's natural width could exceed the modal interior, pushing
elements past the right edge or visually merging with neighbours.
Restructured all five helpers to a label-spacer-cluster layout:
[Label] [Value] [-] [+]
└────── flex-grow=1 ──────┘ └─ cluster ─┘
with `width: Val::Percent(100.0)` on the row so it spans the body
width. The flex-grow spacer absorbs all slack horizontal space; the
controls cluster (value + buttons) sits flush against the right
edge regardless of value-text length. Existing tests still pass —
no behaviour change, just stable layout.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
funman300
a4bc063497