From 0aef7f1f96d2d734bccd0a804f1e8dbf78c12752 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 06:06:15 +0200 Subject: [PATCH] Scroll a long section nav instead of wrapping it onto a grid Five or more sections wrapped onto a 3- or 4-column grid, which left the tab bar's divider under the last row only and stranded every upper row's active indicator against nothing. From five they are now what M3 prescribes and its accessibility page defends: a scrollable tab bar, each tab as wide as its label, offset 52dp. Four or fewer still share the row. The 20px icons take the 20 cut. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-16). Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- .../livewire-material-development/SKILL.md | 2 +- resources/css/components/tabs.css | 1 + .../views/components/section-nav.blade.php | 26 ++++++++++--------- tests/Feature/Components/TabsTest.php | 13 +++++++--- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index a471bf96..f5c7c099 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -804,7 +804,7 @@ M3 tabs with a server-rendered tablist (arrow keys, Home/End, disabled tabs skip ### `` -Navigation between the sections of one area (settings, admin): secondary tabs as links from `medium` (600px; wrapping onto a grid rather than a single row below `large`, rather than scrolling), a menu picker on a compact window, whose items mark the current section as the page (`current`) and carry each section's badge. `items`: `['title', 'url', 'icon', 'active', 'badge']` — current when `active` or its `url` is the page's (during a Livewire update request, the page the component was rendered on, so the section stays lit when a component re-renders). `label`, `no-wire-navigate`. +Navigation between the sections of one area (settings, admin): secondary tabs as links from `medium` (600px), a menu picker on a compact window, whose items mark the current section as the page (`current`) and carry each section's badge. Up to four sections share the row; from five it is M3's scrollable tab bar — tabs as wide as their labels, offset 52dp from the leading edge so it reads as scrollable. `items`: `['title', 'url', 'icon', 'active', 'badge']` — current when `active` or its `url` is the page's (during a Livewire update request, the page the component was rendered on, so the section stays lit when a component re-renders). `label`, `no-wire-navigate`. ### `` diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css index 7037bbf6..4dc43bc4 100644 --- a/resources/css/components/tabs.css +++ b/resources/css/components/tabs.css @@ -65,6 +65,7 @@ transition: color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } + [data-tabs-bar][data-scrollable] > li, [data-tabs-bar][data-scrollable] [data-tab] { flex: none; } diff --git a/resources/views/components/section-nav.blade.php b/resources/views/components/section-nav.blade.php index ccecc959..33bb3870 100644 --- a/resources/views/components/section-nav.blade.php +++ b/resources/views/components/section-nav.blade.php @@ -13,10 +13,15 @@ The page's URL is `Livewire::originalUrl()`: while a Livewire component on the page updates, the request is Livewire's update endpoint, and comparing with it left no section lit. - A row too long for its column wraps onto a grid rather than scrolling: below `large` (1200px) - five or six - sections go 3 + 3 and seven or more go four to a row — tabs that scroll hid the last sections on - a tablet. `label` names the navigation ("Sections"). Links use `wire:navigate` unless + Up to four sections share the row as fixed tabs. From five the row is M3's scrollable tab bar + — each tab as wide as its own label, the set scrolling sideways, offset 52dp from the leading + edge so it reads as scrollable — which is M3's own answer to a row that will not fit, and the + one its accessibility page blesses ("horizontal scrolling tabs meet accessibility requirements + because they need to increase in width to respond to label text without affecting the + layout"). An earlier version wrapped them onto a grid instead, which left the bar's divider + under the last row only and stranded the upper rows' indicators against nothing. + + `label` names the navigation ("Sections"). Links use `wire:navigate` unless `no-wire-navigate`. --}} @props([ @@ -31,11 +36,8 @@ $isCurrent = fn (array $item): bool => ($item['active'] ?? false) || (filled($item['url'] ?? null) && $page === url($item['url'])); $current = collect($items)->first($isCurrent) ?? ($items[0] ?? null); - $layout = match (true) { - count($items) < 5 => 'medium:flex', - count($items) < 7 => 'medium:grid medium:grid-cols-3 large:flex', - default => 'medium:grid medium:grid-cols-4 large:flex', - }; + // Four fit a row at the widths this bar is used at; from five they are M3's scrollable tabs. + $scrollable = count($items) >= 5; @endphp
class(['min-w-0']) }} data-section-nav> @@ -45,7 +47,7 @@