Bound a text field's width from medium
M3 § Text Fields, Behaviour: compact may let a field span full width, but medium and expanded must bound it — "never let it span the full width of a large screen". Nothing in the package capped a field (plan step 24, audit docs/audits/m3-alignment/inputs.md § Missing). From `medium` a field now stops at 40rem — the site names no number, so the header says where this one comes from — which a `max-w-*` class beats and `full` takes off. The search bar already carries M3's own 720px. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Fable 5.1
parent
c8c2d2e13e
commit
72a3e22fbc
@@ -41,6 +41,14 @@
|
||||
</div>
|
||||
</div>
|
||||
BLADE,
|
||||
'Width at medium and above' => <<<'BLADE'
|
||||
<div class="w-full space-y-4">
|
||||
{{-- M3: never let a text field span the full width of a large screen. From medium it stops at 40rem. --}}
|
||||
<x-input label="Bounded, the default" hint="No wider than 40rem from medium, however wide the pane is" />
|
||||
<x-input label="Narrower" class="max-w-xs" hint="A max-w-* class from the call site wins" />
|
||||
<x-input label="The width of the pane" full icon="search" hint="`full` takes the bound off — for a search row or an editor" />
|
||||
</div>
|
||||
BLADE,
|
||||
'Character counter' => <<<'BLADE'
|
||||
<div class="grid w-full gap-6 medium:grid-cols-2">
|
||||
<div class="grid content-start gap-4">
|
||||
|
||||
Reference in New Issue
Block a user