From db85e59fe22a7bc7796a7e656ccecf95e635043e Mon Sep 17 00:00:00 2001
From: CoreScope Bot <bot@corescope>
Date: Sun, 24 May 2026 04:35:25 +0000
Subject: [PATCH] =?UTF-8?q?fix(nav):=20hide=20.nav-stats=20at=20=E2=89=A41?=
 =?UTF-8?q?100px=20to=20match=20JS=20overflow=20assumption=20(#1343)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores the .nav-stats { display: none } rule inside the existing
@media (min-width: 768px) and (max-width: 1100px) block so that the
JS contract documented in applyNavPriority (public/app.js:1146) —
'in the 768-1100px band the CSS already hides .nav-stats' — holds.

Without this rule, at 900<viewport≤1100 the .nav-stats badge claims
inline width on .nav-left (which has overflow:hidden + flex-shrink:1
on .top-nav), silently clipping the 5 high-priority links out of view.

Also removes the now-redundant .nav-stats { display: none } from the
@media (max-width: 900px) block — the 1100px rule covers that range
and the duplicate misled readers (and the issue reporter) into
thinking 900px was the hide breakpoint.

Green: test-nav-stats-1343-e2e.js passes at 800/960/1080/1200px.
Existing nav-priority tests (1055/1102/1139/1311) still pass.
---
 public/style.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index 2bc67f5b..7219f4a4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1633,8 +1633,12 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
 
 /* === Responsive — Tablet (≤900px) === */
 @media (max-width: 900px) {
+  /* nav-stats hidden in the (min-width:768) and (max-width:1100) band
+     below — see #1343. Keeping the rule here too is harmless but
+     misleading: it implies 900px is the breakpoint when in reality
+     the JS applyNavPriority assumes (and the 1100px block enforces)
+     the hide-band extends up to 1100px. */
   .panel-right { width: 320px; min-width: 320px; }
-  .nav-stats { display: none; }
   .brand-logo { height: 32px; width: 112px; }
   .nav-link { padding: 14px 8px; font-size: 13px; }
   .map-controls { width: 180px; font-size: 12px; }
@@ -1701,6 +1705,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
    above so its tighter padding/gap rules win the cascade by source
    order at 1024px (same specificity). */
 @media (min-width: 768px) and (max-width: 1100px) {
+  .nav-stats { display: none; }
   .nav-links { gap: 0; }
   .nav-link { padding: 14px 6px; }
   .nav-link.active { padding: 10px 6px; }