From 9210dc8f14e8c05e59dec1eca02b3703cec2c0b3 Mon Sep 17 00:00:00 2001
From: krisf <kris@gohosted.ca>
Date: Sat, 15 Aug 2026 19:52:53 -0400
Subject: [PATCH] fix(mobile): hide inline header nav below md; add
 overflow-x:clip guard

Header NavLinks (Top Stories/Canada/National/All) always rendered and
overflowed the ~360-400px viewport, causing whole-page horizontal
scroll + wrapped/bleeding active pill. Now hidden on phones (the
horizontally-scrolling SectionPills row under the header remains the
mobile nav); inline nav returns at md (768px). Added overflow-x:clip on
html as a global NOOP-safe against any future sideways overflow.
---
 src/app/globals.css                | 2 ++
 src/components/layout/NavLinks.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 03f1617..7d35ed4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,6 +8,8 @@
 
 html {
   scroll-behavior: smooth;
+  /* never allow sideways scroll from any overflow (sticky-safe, unlike hidden) */
+  overflow-x: clip;
 }
 
 body {
diff --git a/src/components/layout/NavLinks.tsx b/src/components/layout/NavLinks.tsx
index 3a39864..e15f91b 100644
--- a/src/components/layout/NavLinks.tsx
+++ b/src/components/layout/NavLinks.tsx
@@ -7,7 +7,7 @@ import { SECTIONS } from '@/data/feeds';
 export default function NavLinks() {
   const pathname = usePathname();
   return (
-    <nav className="flex items-center gap-1" aria-label="Primary">
+    <nav className="hidden items-center gap-1 md:flex" aria-label="Primary">
       {SECTIONS.map((s) => {
         const href = s.slug === 'all' ? '/' : `/${s.slug}`;
         const active = s.slug === 'all' ? pathname === '/' : pathname.startsWith(`/${s.slug}`);