Andreas Reinhold / reiniandClaude Opus 5
92d3d761f3
<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>
45 lines
1.8 KiB
CSS
45 lines
1.8 KiB
CSS
/*
|
|
* <x-form>: its fields in one column, and its actions at the foot
|
|
* (resources/views/components/form.blade.php).
|
|
*
|
|
* The column is a one-track grid whose track is `minmax(0, 1fr)`: a bare grid's implicit column
|
|
* floors at its content's min-content, so on a phone a wide field would push the form past its
|
|
* pane. Rows take their content's height. 16px (`space200`) between fields, because a text field
|
|
* floats its label half above its outline and any less lets the hint under one field run into the
|
|
* label of the next. A button written among the fields keeps its label's width at the start edge,
|
|
* where the grid would stretch it across: M3 keeps a button's width "dynamic to fit label" and
|
|
* says not to "stretch buttons into long flat shapes"
|
|
* (docs/reference/m3/components-actions-communication-containment.md § Buttons).
|
|
*
|
|
* The actions wrap, end-aligned, 8px (`space100`) apart — M3's gap between buttons in a row. A
|
|
* caller's class on the `actions` slot lands on the row and outranks this layer.
|
|
*
|
|
* [data-md-form] the <form>
|
|
* [data-md-form-actions] the row of actions, under the divider when `separator` asks for one
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './divider.css';
|
|
|
|
@layer material.components {
|
|
[data-md-form] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-auto-rows: min-content;
|
|
gap: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-form] > [data-md-button] {
|
|
justify-self: start;
|
|
}
|
|
|
|
[data-md-form-actions] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|