krisf/maple-brief-aggregator
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): hide inline header nav below md; add overflow-x:clip guard

Browse Source 
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.
This commit is contained in:
krisf
2026-08-15 19:52:53 -04:00
parent cbea5e8fa4
commit 9210dc8f14
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+2
View File
@@ -8,6 +8,8 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
/* never allow sideways scroll from any overflow (sticky-safe, unlike hidden) */
overflow-x: clip;
} }
body { body {
src/components/layout/NavLinks.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { SECTIONS } from '@/data/feeds';
export default function NavLinks() { export default function NavLinks() {
const pathname = usePathname(); const pathname = usePathname();
return ( 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) => { {SECTIONS.map((s) => {
const href = s.slug === 'all' ? '/' : `/${s.slug}`; const href = s.slug === 'all' ? '/' : `/${s.slug}`;
const active = s.slug === 'all' ? pathname === '/' : pathname.startsWith(`/${s.slug}`); const active = s.slug === 'all' ? pathname === '/' : pathname.startsWith(`/${s.slug}`);