From 79e9e6b5f2041949ac981c5526a1fd9671d9ffe3 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 14:27:56 -0700
Subject: [PATCH] Collapse the header nav before it overflows

Thirteen destinations need about 1275px beside the brand, but the nav only
collapsed below 980px, so the page scrolled sideways between 981 and 1280px.
The nav now tightens up to 1400px and collapses below 1240px; the content
rules stay at 980px.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
---
 .../frontend-test/header_layout.test.mjs        |  7 +++++++
 cmd/teploy-dash/frontend/css/style.css          | 17 ++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/header_layout.test.mjs b/cmd/teploy-dash/frontend-test/header_layout.test.mjs
index 8b21768..6c6bb2b 100644
--- a/cmd/teploy-dash/frontend-test/header_layout.test.mjs
+++ b/cmd/teploy-dash/frontend-test/header_layout.test.mjs
@@ -21,6 +21,13 @@ assert(menu.includes('class="nav-pins"') && menu.includes('x-data="navLinks"'),
 assert(/\.nav-pins \{ display: none; \}/.test(css), 'menu pins are hidden by default (desktop shows header icons)');
 assert(/@media \(max-width: 640px\)[\s\S]*\.nav-pins \{ display: block;/.test(css), 'menu pins show on phones');
 
+// The nav collapses before it can overflow: thirteen destinations do not fit
+// beside the brand below about 1200px (measured), so the toggle must take over
+// at a width above that, not at the 980px content breakpoint.
+const collapse = css.match(/@media \(max-width: (\d+)px\) \{\s*\.navbar \{[\s\S]*?\.nav-toggle \{ display: flex; \}/);
+assert(collapse && Number(collapse[1]) >= 1200, 'the nav collapses to the toggle at 1200px or wider');
+assert((menu.match(/<li><a /g) || []).length === 13, 'thirteen destinations: re-measure the collapse width when this changes');
+
 // The theme store keeps toggle() and gains set().
 const listeners = [];
 globalThis.document = {
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 7ae20e0..2e71a4f 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -318,9 +318,17 @@ code { overflow-wrap: anywhere; }
 /* Nav toggle: only shown once the primary nav collapses into a panel. */
 .nav-toggle { display: none; }
 
-/* Responsive header: below 980px the nav no longer fits beside the brand, so
-   it collapses into a drop-down panel opened from the header toggle. */
-@media (max-width: 980px) {
+/* Responsive header: the thirteen destinations need about 1275px beside the
+   brand. Up to 1400px they tighten to about 1190px; below 1240px the nav
+   collapses into a drop-down panel opened from the header toggle. Raise both
+   when a destination is added. */
+@media (max-width: 1400px) {
+  .navbar { gap: 14px; }
+  .navbar-nav { gap: 2px; }
+  .navbar-nav a { padding: 5px 8px; }
+}
+
+@media (max-width: 1239px) {
   .navbar {
     min-height: 56px; gap: 10px;
     padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
@@ -337,6 +345,9 @@ code { overflow-wrap: anywhere; }
   .navbar-nav.open { display: flex; }
   .navbar-nav a { display: flex; min-height: 44px; padding: 0 12px; align-items: center; font-size: 14px; }
   .navbar-nav .nav-sep { align-self: stretch; width: auto; height: 1px; margin: 4px 12px; }
+}
+
+@media (max-width: 980px) {
   .content { padding-top: 22px; }
   .stats-grid { grid-template-columns: repeat(2, 1fr); }
   .dialog { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }