From a689991a430963d554ad1b592900bac9ee0e30c3 Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Wed, 18 Feb 2026 23:18:14 -0800
Subject: [PATCH] make header and footer flow in layout, fix mobile viewport
 scroll

- header/footer are now flex children instead of absolute overlays
- mobile grid uses auto+1fr rows so intro sizes to content
- h-dvh + overflow-hidden + overscroll-none prevents mobile scroll bounce
- add horizontal padding to intro section

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/app/layout.tsx        |  2 +-
 web/src/app/page.tsx          | 13 +++++--------
 web/src/components/Footer.tsx |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index c8477240..63670222 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -44,7 +44,7 @@ export default function RootLayout({
     <html lang='en' suppressHydrationWarning>
       <body
         className={twJoin(
-          'selection:bg-primary selection:text-primary-foreground min-h-dvh font-sans underline-offset-4 antialiased',
+          'selection:bg-primary selection:text-primary-foreground min-h-dvh overscroll-none font-sans underline-offset-4 antialiased',
           fontSans.variable,
           fontMono.variable,
         )}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index b8a7bcf0..e7fef408 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -357,25 +357,22 @@ function Carousel() {
 
 export default function Home() {
   return (
-    <div className='grid h-dvh grid-rows-[2fr_4fr] overflow-hidden md:grid-cols-2 md:grid-rows-none'>
+    <div className='grid h-dvh overflow-hidden grid-rows-[auto_1fr] md:grid-cols-2 md:grid-rows-none'>
       {/* Left cell — intro */}
       <motion.div
-        className='bg-muted/50 dark:bg-muted/30 relative flex flex-col gap-4 overflow-hidden'
+        className='bg-muted/50 dark:bg-muted/30 relative flex flex-col gap-4 overflow-hidden px-4'
         initial='hidden'
         animate='visible'
         variants={staggerContainer}
       >
         <EmotePhysicsBackground />
-        <motion.div
-          variants={item}
-          className='absolute inset-x-0 top-0 z-20 p-4'
-        >
+        <motion.div variants={item} className='relative z-20 pt-4'>
           <Header />
         </motion.div>
 
         <motion.div
           variants={staggerContainer}
-          className='relative z-10 flex min-h-full flex-col items-center justify-center gap-4 text-center md:gap-6'
+          className='relative z-10 flex flex-1 flex-col items-center justify-center gap-4 text-center md:gap-6'
         >
           <motion.div variants={item} className='flex flex-col gap-3 md:gap-4'>
             <h1 className='text-2xl font-semibold tracking-tight text-pretty md:text-4xl'>
@@ -425,7 +422,7 @@ export default function Home() {
 
       {/* Right cell — carousel */}
       <motion.div
-        className='flex flex-col overflow-hidden py-4'
+        className='flex min-h-0 flex-col overflow-hidden py-4'
         initial={{ opacity: 0, y: 30, filter: 'blur(4px)' }}
         animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
         transition={{ duration: 0.6, ease: 'easeOut', delay: 0.4 }}
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index d76916ef..855d99f8 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import { tommyLink } from '@/lib/constants'
 
 export function Footer() {
   return (
-    <footer className='absolute inset-x-0 bottom-8 z-30 text-center'>
+    <footer className='relative z-30 pb-2 text-center md:pb-4'>
       <p className='text-muted-foreground/60 text-xs'>
         Made by{' '}
         <a