From 5bd799aa3c2bdcceca48de74466615074e6af947 Mon Sep 17 00:00:00 2001 From: xarmian Date: Sun, 26 Jul 2026 13:50:07 +0000 Subject: [PATCH] fix(web): one width and one height for every action-bar control MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../lib/components/items/ItemDetail.svelte | 58 ++++++++++++++++++- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/web/src/lib/components/items/ItemDetail.svelte b/web/src/lib/components/items/ItemDetail.svelte index d6fe9a0d..e8784c92 100644 --- a/web/src/lib/components/items/ItemDetail.svelte +++ b/web/src/lib/components/items/ItemDetail.svelte @@ -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-` (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); } }