fix(web): one width and one height for every action-bar control

The  quick-actions trigger belongs to QuickActionsMenu and never carried
`.action-btn`, so it rendered 41x22 beside its neighbours' 70x26 — a different
width AND height, which is what read as awkward. Give its wrapper the same
70px basis, let the trigger fill it, and set the band's box metrics in one
place instead of two.

The ⋯ overflow trigger is the deliberate exception and now sizes to its glyph
(38px). That needs `min-width: auto` as well as the flex change: `.action-btn`'s
base `min-width: 70px` reaches it as a grandchild, so the direct-child override
missed it and a 70px floor held it wide regardless of flex-basis.

Pin `line-height: 1.35` so glyph metrics stop leaking into the height — "⋯" and
"☆" resolved 1px apart, which `align-items: center` then showed as a misaligned
row — and take block padding to `--space-2` for the requested ~30% more height:
26.1px -> 34.1px (+30.7%).

Measured at 216-864px band widths: one height (34.1px) everywhere, no wrap and
no clipped label at any width, ⋯ exempt at 38px. Uniform width holds wherever
the row has slack; below ~382px the controls necessarily diverge as each
compresses toward its own label, and a label wider than 70px (a 3-digit child
count) still grows past the basis rather than truncating.

Gates: svelte-check 0 errors, 490 vitest, 39 e2e.
This commit is contained in:
xarmian
2026-07-26 13:50:07 +00:00
parent 92f8a6e242
commit 5bd799aa3c
+55 -3
View File
@@ -6483,8 +6483,15 @@
shrinking stops at the label rather than clipping "🌳 12/34" down to
nothing. Overriding the 70px floor above is the whole point; without
this line the floor and the basis are the same number and nothing
shrinks. */
.meta-actions .action-btn {
shrinks.
Applies to the DIRECT-child buttons (star, 🌳, 📎) plus the ⚡ trigger's
wrapper, so every labelled control in the band is one width. The ⚡ is
the reason this list isn't just `.action-btn`: it belongs to
QuickActionsMenu and never carried `.action-btn`, so it rendered 41x22
against its neighbours' 70x26 — a different width AND height. */
.meta-actions > .action-btn,
.meta-actions > :global(.quick-actions-menu) {
flex: 0 1 70px;
min-width: auto;
}
@@ -6498,6 +6505,50 @@
.meta-actions :global(.quick-actions-menu) {
display: flex;
}
/* Fill the wrapper the basis was applied to, and match `.action-btn`'s box
metrics exactly — the trigger's own rule uses `2px` block padding, which
is what made it 4px shorter than everything beside it.
Specificity: the child component's scoped rule compiles to
`.trigger-btn.svelte-<hash>` (0,2,0), so a bare `:global(.trigger-btn)`
would TIE and be resolved by cross-file source order — unreliable. The
child combinator takes this to 0,3,0 and wins outright. */
.meta-actions :global(.quick-actions-menu > .trigger-btn) {
flex: 1 1 auto;
min-width: auto;
}
/* One height for every control in the band, set in one place — the ⚡
trigger's own rule used 2px block padding against `.action-btn`'s 4px,
which is why it sat 4px shorter than its neighbours.
`line-height` is pinned so glyph metrics can't leak into the height:
"⋯" and "☆" resolved 1px apart, which `align-items: center` then showed
as a misaligned row. 1.35 reproduces the line box the band had before
this change (1.2 measured 24.3px tall overall).
`--space-2` block padding is the requested ~30% taller: 16.1px line +
16px padding + 2px border = 34.1px, against 26.1px at `--space-1`.
Padding rather than a fixed height so the box still grows if the label
ever wraps to a second line or the root font size changes. */
.meta-actions > .action-btn,
.meta-actions .pane-more-btn,
.meta-actions :global(.quick-actions-menu > .trigger-btn) {
line-height: 1.35;
padding-block: var(--space-2);
}
/* The overflow trigger is the deliberate exception to the uniform width
(user's call): it's a control rather than a labelled value, so it sizes
to its glyph instead of padding out to 70px.
`min-width: auto` is required, not decorative: `.action-btn`'s base
`min-width: 70px` reaches this button too (it is a grandchild, so the
direct-child override above misses it), and a 70px floor kept it padded
out to 70px no matter what flex-basis said. */
.meta-actions > .menu-anchor,
.meta-actions .pane-more-btn {
flex: 0 0 auto;
min-width: auto;
}
/* Last resort before overflow. Once every control has shrunk to its own
label the row can still exceed a 264px band (a 312px pane — the draggable
@@ -6511,7 +6562,8 @@
none of its own, so a bare `.action-btn` here would tie with the base
rule above and be decided by source order. */
@container item-action-bar (max-width: 339.98px) {
.meta-actions .action-btn {
.meta-actions .action-btn,
.meta-actions :global(.quick-actions-menu > .trigger-btn) {
padding-inline: var(--space-2);
}
}