From f72415f464cfb120375cc49b26f46166ebe40b93 Mon Sep 17 00:00:00 2001
From: Martin Dvorak <dvorak@dvorakmortonxd.dev>
Date: Wed, 30 Sep 2026 13:20:00 +0000
Subject: [PATCH] fit web section nav without horizontal scroll on phones

---
 agents.md       |  4 ++++
 src/app/web.css | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/agents.md b/agents.md
index 951b5cd..cf5895a 100644
--- a/agents.md
+++ b/agents.md
@@ -175,6 +175,10 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
 - The sidebar foot (`.web-side-foot` — the live clock + contact email and its
   top divider) is hidden on phones under `max-width: 640px`. In the collapsed
   top panel it's just noise; the desktop/tablet sidebar keeps it.
+- On phones (`max-width: 640px`) the section nav (`.web-nav`) stops being the
+  sideways-scrolling row it is on tablets and becomes a wrapping **grid**
+  (3-up, 2-up below `375px`) of button tiles, so every section fits with no
+  horizontal scroll — the collapsed top panel must never scroll sideways.
 - Under `max-width: 640px` the year-grid heatmap (`.heatmap-container`) and its
   legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is
   unreadable at phone widths. The contribution total and the commit history
diff --git a/src/app/web.css b/src/app/web.css
index 31a2e91..3331c52 100644
--- a/src/app/web.css
+++ b/src/app/web.css
@@ -1114,6 +1114,22 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
   .web-title {
     font-size: 1.7rem;
   }
+  /* Section nav: fit every link on screen instead of a sideways-scrolling row,
+     so the collapsed top panel never scrolls horizontally — a 3-up button
+     grid (2-up on very narrow phones, see the 374px block below). */
+  .web-nav {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 6px;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+  .web-nav a {
+    justify-content: center;
+    padding: 9px 8px;
+    border: 1px solid var(--btn-border, var(--glass-border));
+    background: var(--btn-bg, var(--glass-lo));
+  }
   .project-grid {
     columns: 1;
   }
@@ -1149,6 +1165,14 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
   }
 }
 
+/* Very narrow phones: 3-up is too tight for the longest labels ("Overview",
+   "Hardware"), so fall back to a 2-up grid — still no horizontal scrolling. */
+@media (max-width: 374px) {
+  .web-nav {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html[data-theme="web"] *,
   html[data-theme="web"] *::before,