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 {