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
+2 -1
View File
@@ -4,7 +4,8 @@
`gap` is a spacing token's name, `space25` … `space900` (docs/reference/m3/styles-supplement.md
§ Spacing), and none when left out or unknown. `align` places the children across the stack:
`stretch` (the default), `start`, `center` or `end`.
`stretch` (the default), `start`, `center` or `end`. A button keeps its label's width even
when the rest stretch, as M3 asks.
M3's layout has no arrangement component inside a pane — its "column" is a grid column — so
this is the package's neutral one, beside `<x-row>` and `<x-grid>`. It takes `as`,