Grow the snackbar's text from a zero basis again

Plan step 36. The rewrite drew Tailwind's `flex-1` (flex: 1 1 0%) as
`flex: 1 1 auto`. In a wrapping row that measures the text at its full
line length, so a long title pushed the action onto a line of its own
from 600px, where the two used to share one. The header also gave a
reason for drawing the buttons' state layer by hand that does not hold
(the layer is currentColor either way); it now says why: the view writes
no class list, as button.css.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:06:28 +02:00
co-authored by Claude Opus 5
parent d706eef01b
commit 204c2d2b24
2 changed files with 9 additions and 5 deletions
+6 -5
View File
@@ -17,10 +17,11 @@
* Below `medium` it is full width; from there it hugs its line length, which an application's own
* class can still bound.
*
* The action and the close button are both drawn at 40px but reach M3's 48px target (ACT-18) with
* the same `::after` touch target the shared classes use (foundation/interaction.css); they draw
* their own state layer and focus ring instead of those classes because the action's ink is
* inverse-primary, not the button's inherited inverse-on-surface.
* The action and the close button are both drawn at 40px and reach M3's 48px target (ACT-18)
* through an `::after`. Their state layer, focus ring and target are the declarations of the
* foundation's `md-state-layer`, `md-focus-ring` and `md-touch-target`
* (foundation/interaction.css), keyed on the buttons themselves as button.css does, because the
* view writes no class list.
*
* It enters on a translate and a fade on the fast spatial spring, `@starting-style` giving both a
* start. No state icon: M3 says to avoid one in a snackbar (ACT-20). The live region is the host
@@ -94,7 +95,7 @@
[data-md-toast-content] {
min-width: 0;
flex: 1 1 auto;
flex: 1;
padding-block: 6px;
}