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; }