From 7c70a7e898ceca87105ece874f1b0aa9355b8608 Mon Sep 17 00:00:00 2001
From: Liao Shiwu <gt28f5xc4d@privaterelay.appleid.com>
Date: Sun, 6 Sep 2026 23:49:34 +0800
Subject: [PATCH] fix(tabs): wrap the pill nav instead of spilling off-screen
 past 8 Sparks

With more than ~7 units the tab pills (all shrink-0 / nowrap) ran past the
nav's rounded container and, from 9 units on, past the right edge of the
page itself: at 1440x900 with 10 Sparks the document scrolled 299px wide and
the last two tabs plus the + button were unreachable.

- .pill-nav wraps onto further rows, so every tab stays inside the nav.
- flex-basis 0 keeps the header itself on one line (previously the nav and
  the settings/theme controls each wrapped onto their own header row).
- border-radius 23px == the old fully-rounded look at the 45.5px one-row
  height, and stays sane once the nav is 2+ rows.
- rectSortingStrategy replaces horizontalListSortingStrategy so drag-reorder
  animates correctly across rows.

Verified with 2/8/10/16 units at 1920/1440/1280/1024/800px: no overflow, and
with <=7 units the layout geometry is byte-identical to before.

Claude-Session: https://claude.ai/code/session_01K8Uebe5LQVjrAMkWXacCXd
---
 src/components/SparkTabs.tsx |  7 +++++--
 src/index.css                | 13 +++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/SparkTabs.tsx b/src/components/SparkTabs.tsx
index cdee7d8c..4592bb9d 100644
--- a/src/components/SparkTabs.tsx
+++ b/src/components/SparkTabs.tsx
@@ -13,7 +13,7 @@ import {
 import {
   SortableContext,
   arrayMove,
-  horizontalListSortingStrategy,
+  rectSortingStrategy,
   sortableKeyboardCoordinates,
   useSortable,
 } from "@dnd-kit/sortable";
@@ -351,7 +351,10 @@ export function SparkTabs({
     >
       <nav className="pill-nav" aria-label="Sparks">
         <OverviewTab isActive={activeId === OVERVIEW_ID} onSelect={onSelect} />
-        <SortableContext items={items} strategy={horizontalListSortingStrategy}>
+        {/* rect (not horizontal-list) strategy: .pill-nav wraps onto several
+            rows once there are more Sparks than fit one line, and the
+            horizontal strategy only ever shifts items along X. */}
+        <SortableContext items={items} strategy={rectSortingStrategy}>
           {ordered.map((spark) => (
             <SortableTab
               key={spark.id}
diff --git a/src/index.css b/src/index.css
index 8d02d7ba..39dce9aa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -335,12 +335,21 @@ input:disabled {
 .pill-nav {
   display: flex;
   align-items: center;
+  /* Wrap onto further rows once the tabs no longer fit: the pills are
+     `shrink-0`/nowrap, so without this they spill past the nav (and the
+     viewport) as soon as there are more Sparks than fit on one line. */
+  flex-wrap: wrap;
   gap: 4px;
   background: var(--color-surface-elevated);
   padding: 5px 6px;
-  border-radius: 50px;
+  /* 23px == fully rounded at the 45.5px single-row height (the browser clamps
+     it to half the height), and keeps sane corners once the nav is 2+ rows. */
+  border-radius: 23px;
   box-shadow: var(--shadow-card);
-  flex: 1 1 auto;
+  /* Zero basis so the header's own flex-wrap never breaks the nav (and the
+     right-hand controls) onto extra header lines — the nav takes the space
+     that is left and wraps its tabs internally instead. */
+  flex: 1 1 0;
   min-width: 0;
 }