From 4893eaf398f87eb75eca88688714b13531f28e10 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 17:06:50 +0200 Subject: [PATCH] Grow the alert'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`; it is `flex: 1` again. The header's reasons were not true either: no chip or FAB menu stylesheet pulls a text-button row back (the rich tooltip's does), and the dismiss button's negative margin does not stop a touch target's ::after. It now says the button carries the shared classes' declarations because the view writes no class list, as button.css does. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components/alert.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/resources/css/components/alert.css b/resources/css/components/alert.css index 8b5e0dc3..ab07337d 100644 --- a/resources/css/components/alert.css +++ b/resources/css/components/alert.css @@ -2,15 +2,16 @@ * : a notice in the page — not an M3 component (M3's banner is gone), drawn in M3's own * terms as the plan's deliberate-deviations note records: the state's container colour (tinted, * never filled), a medium corner, the state's icon, title-small/body-medium text and an actions - * row of text buttons pulled back to the text's edge, the trick every text-button row in this - * package uses (chip.css, fab-menu.css, rich-tooltip.css). + * row of text buttons pulled back 12px to the text's edge, as the rich tooltip's actions row is + * (rich-tooltip.css). * * `data-md-color`: info (the default), success, warning, error, primary, secondary, tertiary or * neutral (surface-container-high, on-surface — it has no state colour of its own). The dismiss - * button reaches M3's 48px target from its drawn 40px (ACT-18) with its own state layer, focus - * ring and touch target rather than the shared classes (foundation/interaction.css): its `-8px` - * margin, pulling it flush with the alert's own edge, already claims the touch target's `::after` - * inset. + * button is drawn at 40px, pulled 8px out into the alert's padding, and reaches M3's 48px target + * (ACT-18) through an `::after`. Its 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 button itself as button.css does, because the view + * writes no class list. */ @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @@ -65,7 +66,7 @@ [data-md-alert-content] { min-width: 0; - flex: 1 1 auto; + flex: 1; align-self: center; }