mirror of
https://github.com/PerpetualSoftware/pad.git
synced 2026-09-11 21:39:01 +00:00
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:
@@ -6483,8 +6483,15 @@
|
|||||||
shrinking stops at the label rather than clipping "🌳 12/34" down to
|
shrinking stops at the label rather than clipping "🌳 12/34" down to
|
||||||
nothing. Overriding the 70px floor above is the whole point; without
|
nothing. Overriding the 70px floor above is the whole point; without
|
||||||
this line the floor and the basis are the same number and nothing
|
this line the floor and the basis are the same number and nothing
|
||||||
shrinks. */
|
shrinks.
|
||||||
.meta-actions .action-btn {
|
|
||||||
|
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;
|
flex: 0 1 70px;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
}
|
}
|
||||||
@@ -6498,6 +6505,50 @@
|
|||||||
.meta-actions :global(.quick-actions-menu) {
|
.meta-actions :global(.quick-actions-menu) {
|
||||||
display: flex;
|
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
|
/* 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
|
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
|
none of its own, so a bare `.action-btn` here would tie with the base
|
||||||
rule above and be decided by source order. */
|
rule above and be decided by source order. */
|
||||||
@container item-action-bar (max-width: 339.98px) {
|
@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);
|
padding-inline: var(--space-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user