From ed92e916b97df0cdf2fa68e96c5b0ccecbed8914 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 01:09:55 +0200
Subject: [PATCH] Lay out the section nav's list items as flex rows again

Plan step 36, navigation review. The rewrite kept `min-w-0` from the
view's `<li class="flex min-w-0">` but dropped `flex`, so tabs.css's
`li > [data-md-tab] { flex: 1 1 0% }` no longer applied inside the
section nav. The header also called body-large "the tab bar's own"
type, which is title-small.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/components/section-nav.css | 8 +++++---
 tests/Feature/Components/TabsTest.php    | 5 ++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/resources/css/components/section-nav.css b/resources/css/components/section-nav.css
index 7a37841e..c9a2e508 100644
--- a/resources/css/components/section-nav.css
+++ b/resources/css/components/section-nav.css
@@ -15,10 +15,11 @@
  * Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
  * `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
  * `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
- * `min-inline-size: 0` on this bar's own items, so a long title still truncates inside the row
- * `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls
+ * this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
+ * applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
+ * direct children of the bar, never need. The picker's trigger is not one of M3's controls
  * — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
- * for everywhere, at the tab bar's own body-large type (a text class on the view, `md-type-body-lg
+ * for everywhere, in body-large type (a text class on the view, `md-type-body-lg
  * md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
  */
 
@@ -65,6 +66,7 @@
     }
 
     [data-md-section-nav] [data-md-tabs-bar] > li {
+        display: flex;
         min-inline-size: 0;
     }
 }
diff --git a/tests/Feature/Components/TabsTest.php b/tests/Feature/Components/TabsTest.php
index c70c32ad..3afba96d 100644
--- a/tests/Feature/Components/TabsTest.php
+++ b/tests/Feature/Components/TabsTest.php
@@ -156,7 +156,10 @@ it('draws section navigation as secondary tabs and a picker', function () {
     expect($css->declarations('[data-md-section-nav-picker]', ['@media (width >= 600px)']))
         ->toBe(['display' => 'none'])
         ->and($css->declarations('[data-md-section-nav] > nav', ['@media (width < 600px)']))
-        ->toBe(['display' => 'none']);
+        ->toBe(['display' => 'none'])
+        // Each link's list item is a flex row, so tabs.css's `li > [data-md-tab]` shares its width.
+        ->and($css->declarations('[data-md-section-nav] [data-md-tabs-bar] > li'))
+        ->toBe(['display' => 'flex', 'min-inline-size' => '0']);
 });
 
 it('marks the section whose url is the request\'s, and scrolls many sections', function () {