Keep a button at its label's width in a stack and a form

<x-stack> stretches its children across by default and <x-form> is a
one-track grid, so a button written directly in either drew as a
full-width pill. M3 keeps a button's width "dynamic to fit label" and
says not to "stretch buttons into long flat shapes on large windows".
A button there now sits at the start edge at its own width; a stack
aligned start, centre or end is untouched, and an application's own
width still wins (a cap on the button itself was rejected for exactly
that: it would have limited an app's inline-size, which CascadeTest
guards). Chromium test in both directions, failing without the rules.
Decided with the user (plan step 46).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 12:56:45 +02:00
co-authored by Claude Opus 5
parent f5f040516e
commit 92d3d761f3
8 changed files with 58 additions and 5 deletions
+8 -1
View File
@@ -2,7 +2,10 @@
* <x-stack>: its children one under another, in a pane.
*
* A flex column, stretched across the stack's width unless `data-md-align` says `start`, `center`
* or `end`. The space between the children is `--md-gap` (spacing.css), one of M3's spacing
* or `end` — except a button, which keeps its label's width at the start edge: M3 keeps a button's
* width "dynamic to fit label" and says not to "stretch buttons into long flat shapes on large
* windows" (docs/reference/m3/components-actions-communication-containment.md § Buttons). An
* application's own width or `align-self` on it still wins. The space between the children is `--md-gap` (spacing.css), one of M3's spacing
* tokens and none by default; M3 groups with proximity, so the gap is the grouping
* (docs/reference/m3/foundations.md § Layout → Grids & spacing). M3 defines no in-pane arrangement
* component; this is the neutral one, beside <x-row> and <x-grid>.
@@ -26,6 +29,10 @@
gap: var(--md-gap);
}
[data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] {
align-self: start;
}
[data-md-stack][data-md-align='start'] {
align-items: flex-start;
}