From 946f38a624caf8a399d539fd70fe46e8f7be91d6 Mon Sep 17 00:00:00 2001
From: Ross <ross@bimross.com>
Date: Mon, 8 Jun 2026 21:09:54 +0000
Subject: [PATCH] feat(landing): single-viewport on md+, /resume keeps its own
 scroll

Grant flagged on iPad: grantfoster.dev landing scrolls when it should
be one screen. /resume should still scroll because it's long-form
content.

Root cause: the layout wrapper used overflow-y-auto unconditionally,
which let the Hero overflow the viewport on iPad/desktop even though
src/app/page.tsx already had md:overflow-hidden chained through five
flex wrappers.

Fix:
- layout.tsx: wrapper becomes overflow-y-auto md:overflow-y-hidden.
  Mobile keeps the auto-scroll. Desktop + iPad clamp.
- resume/page.tsx: main adds md:h-full md:overflow-y-auto so the
  long-form resume page reintroduces its own scroll container at md+.

This puts the layout in 'permissive on mobile, clamped on md+' mode
and lets long-form routes opt back in. Future single-screen pages
(e.g. coming-soon, project landings) inherit the no-scroll default
without code; new long-form pages just add md:h-full md:overflow-y-auto
on their root.

Build green (next build), tsc --noEmit clean.
---
 frontend/src/app/layout.tsx      | 10 +++++++++-
 frontend/src/app/resume/page.tsx |  6 +++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 704dae7..5bfdb43 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -117,7 +117,15 @@ export default function RootLayout({
         <JsonLd data={rootJsonLd} />
         <ToastProvider>
           <SiteNav />
-          <div className="relative z-10 flex h-full min-h-0 flex-col overflow-x-hidden overflow-y-auto">
+          {/*
+            md:overflow-hidden clamps the landing page (/) to one viewport on
+            desktop + iPad as Grant requested. Mobile (below md) keeps
+            overflow-y-auto so the Hero remains reachable on narrow screens.
+            Scroll-needing routes (/resume) reintroduce their own
+            md:overflow-y-auto on an inner container so the layout decision
+            never has to know which pages are scrollable.
+          */}
+          <div className="relative z-10 flex h-full min-h-0 flex-col overflow-x-hidden overflow-y-auto md:overflow-y-hidden">
             {children}
           </div>
         </ToastProvider>
diff --git a/frontend/src/app/resume/page.tsx b/frontend/src/app/resume/page.tsx
index 25294e4..5318f65 100644
--- a/frontend/src/app/resume/page.tsx
+++ b/frontend/src/app/resume/page.tsx
@@ -114,7 +114,11 @@ const skills = [
 
 export default function ResumePage() {
   return (
-    <main className="min-h-dvh bg-white px-4 pt-20 pb-12 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-100 sm:px-6 md:px-10 md:pt-20 md:pb-16 print:px-0 print:py-0">
+    // md:h-full + md:overflow-y-auto re-enables scrolling on desktop/iPad
+    // here, since the global layout switched to md:overflow-y-hidden so the
+    // landing page can be a single viewport. /resume is long-form content;
+    // scrolling stays the expected behavior.
+    <main className="min-h-dvh bg-white px-4 pt-20 pb-12 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-100 sm:px-6 md:h-full md:overflow-y-auto md:px-10 md:pt-20 md:pb-16 print:px-0 print:py-0">
       <div className="mx-auto max-w-3xl print:max-w-none">
 
         {/* Nav row — hidden on print */}