Let the rail centre its destinations
Plan step 25 (navigation Missing): M3's "alignment: top or center; on tablets prefer center alignment for reach" had no implementation — the rail was top-aligned only. `<x-navigation-rail align="center">` centres the destinations between the header and the footer, which stay at their ends because M3 keeps the menu icon and the FAB top-aligned. `safe center` gives the top back the moment there are more destinations than fit, where centring would push the first one out of reach above the scroller. 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
cef350d739
commit
a5acbe7f6b
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
BLADE,
|
||||
'Collapsed, narrow and expanded rails' => <<<'BLADE'
|
||||
'Collapsed, narrow (centred) and expanded rails' => <<<'BLADE'
|
||||
<div class="flex w-full flex-wrap items-start gap-6">
|
||||
<div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
|
||||
<x-navigation-rail mode="collapsed" label="Collapsed example" divider>
|
||||
@@ -81,7 +81,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
|
||||
<x-navigation-rail mode="collapsed" width="narrow" label="Narrow example" divider>
|
||||
<x-navigation-rail mode="collapsed" width="narrow" align="center" label="Narrow example" divider>
|
||||
<x-slot:header>
|
||||
<x-fab label="Compose" icon="edit" />
|
||||
</x-slot:header>
|
||||
|
||||
Reference in New Issue
Block a user