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>