From 3e7318364b142d7a5b10f70ba5e53dde20a57cc2 Mon Sep 17 00:00:00 2001
From: Oleg <ogrechko@top-sysops.ru>
Date: Sun, 26 Jul 2026 15:47:13 +0000
Subject: [PATCH] Fix topnav horizontal overflow on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.nav-links had no min-width:0/overflow-x handling, so on narrow screens
flex items (brand, nav links, user-menu) refused to shrink below content
size and pushed .topnav-inner past the viewport width — showing as a
horizontal scrollbar (or requiring pinch-zoom-out to see everything).
Nav links now scroll horizontally within their own row instead; brand
and user-menu no longer shrink; email hidden and brand collapses to just
the mark below 640px to leave room.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH
---
 src/app/globals.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/app/globals.css b/src/app/globals.css
index b4edf3a..04ce4fa 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -402,6 +402,7 @@ select.input {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
   font-weight: 600;
   font-size: 15px;
   letter-spacing: -0.01em;
@@ -419,14 +420,27 @@ select.input {
   display: flex;
   align-items: center;
   gap: 4px;
+  /* Flex items don't shrink below their content size by default, so without
+     min-width:0 this row would push .topnav-inner (and the page) wider than
+     the viewport on narrow screens instead of scrolling internally. */
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.nav-links::-webkit-scrollbar {
+  display: none;
 }
 
 .nav-link {
+  flex-shrink: 0;
   padding: 7px 12px;
   border-radius: var(--radius-sm);
   font-size: 13px;
   font-weight: 500;
   color: var(--text-muted);
+  white-space: nowrap;
   transition: background 0.12s ease, color 0.12s ease;
 }
 
@@ -444,6 +458,7 @@ select.input {
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-shrink: 0;
 }
 
 .user-email {
@@ -451,6 +466,25 @@ select.input {
   color: var(--text-muted);
 }
 
+@media (max-width: 640px) {
+  .topnav {
+    padding: 0 12px;
+  }
+
+  .topnav-inner {
+    gap: 8px;
+  }
+
+  .brand {
+    font-size: 0;
+    gap: 0;
+  }
+
+  .user-email {
+    display: none;
+  }
+}
+
 /* ---------- Auth pages ---------- */
 
 .auth-shell {