From 9b6ea9880e60e009c64923842deb513a9a9d86ae Mon Sep 17 00:00:00 2001
From: Shane Maynard <shane@hope-2.local>
Date: Sun, 9 Aug 2026 08:26:35 -0400
Subject: [PATCH] Remove the header's hidden scroll region: section pills
 become a fixed grid on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The section nav (Plan/Bean/Machine/Log/After) was an overflow-x:auto
strip with hidden scrollbars — undiscoverable on touch. It now wraps on
desktop and renders as a fixed five-column grid of equal pills at
≤720px (labels shortened to fit 320px), and the actions row lets the
autosave chip shrink/ellipsize so nothing can force horizontal overflow.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .gitignore        |  1 +
 public/app.css    | 30 ++++++++++++++++++++++--------
 public/index.html |  4 ++--
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1a3b415..aac6fc5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ data/
 .DS_Store
 dev-harness.mjs
 .scratch/
+.env
diff --git a/public/app.css b/public/app.css
index 3503e58..8829abb 100644
--- a/public/app.css
+++ b/public/app.css
@@ -109,16 +109,15 @@ output {
 	color: var(--ink-3);
 }
 
+/* No overflow scrolling: below 1180px this row already sits on its own full-width line, and
+   at ≤720px it becomes a fixed five-column grid — a hidden horizontal scroll region in a
+   header is undiscoverable, especially on touch. */
 .section-nav {
 	display: flex;
 	align-items: center;
 	gap: 2px;
 	flex: 1 1 auto;
-	overflow-x: auto;
-	scrollbar-width: none;
-}
-.section-nav::-webkit-scrollbar {
-	display: none;
+	flex-wrap: wrap;
 }
 .section-nav a {
 	flex: 0 0 auto;
@@ -2593,13 +2592,19 @@ body.show-fids .field[data-fid]::after {
 	.section-nav {
 		width: 100%;
 		order: 2;
-		margin: 0 -2px;
+		margin: 0;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		gap: 4px;
 	}
 	.section-nav a {
 		min-height: 40px;
 		display: inline-flex;
 		align-items: center;
-		padding: 7px 12px;
+		justify-content: center;
+		padding: 7px 2px;
+		font-size: 11.5px;
+		text-align: center;
 	}
 	.header-actions {
 		order: 3;
@@ -2607,10 +2612,19 @@ body.show-fids .field[data-fid]::after {
 		display: flex;
 		align-items: center;
 		gap: 8px;
+		min-width: 0;
 	}
+	/* The chip yields space to the buttons rather than forcing the row wide. */
 	.header-actions .autosave-chip {
-		flex: 1 1 auto;
+		flex: 1 1 0;
+		min-width: 0;
 		justify-content: center;
+		overflow: hidden;
+	}
+	.header-actions .autosave-text {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	.header-actions #btn-print,
 	.header-actions #btn-expand-why {
diff --git a/public/index.html b/public/index.html
index 9a97a2e..123ef58 100644
--- a/public/index.html
+++ b/public/index.html
@@ -65,8 +65,8 @@
           <nav class="section-nav" id="section-nav" aria-label="Plan sections">
             <a href="#sec-coffee">Plan</a>
             <a href="#sec-bean">Bean</a>
-            <a href="#sec-machine">Machine plan</a>
-            <a href="#sec-roastlog">Roast log</a>
+            <a href="#sec-machine">Machine</a>
+            <a href="#sec-roastlog">Log</a>
             <a href="#sec-after">After</a>
           </nav>