diff --git a/app/create/page.tsx b/app/create/page.tsx
index 313748c..2d89599 100644
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@@ -15,9 +15,9 @@ export default function CreatePage() {
         <Sidebar />
         <SidebarOffset />
         <MobileSidebar />
-        <main className="min-w-0 flex-1">
+        <main className="flex min-h-dvh min-w-0 flex-1 flex-col">
           <AppHeader />
-          <div className="mx-auto w-full max-w-3xl px-4 pb-cta lg:px-10 lg:pb-20">
+          <div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-cta lg:px-10 lg:pb-20">
             <UploadScreen />
           </div>
           <TabBar />
diff --git a/app/globals.css b/app/globals.css
index 97dd60b..278bf01 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -174,6 +174,7 @@
 html,
 body {
   height: 100%;
+  overscroll-behavior: none;
 }
 
 body {
diff --git a/app/page.tsx b/app/page.tsx
index 9a159be..f65dbb3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,9 +11,9 @@ export default function HomePage() {
         <Sidebar />
         <SidebarOffset />
         <MobileSidebar />
-        <main className="min-w-0 flex-1">
+        <main className="flex min-h-dvh min-w-0 flex-1 flex-col">
           <AppHeader />
-          <div className="mx-auto w-full max-w-6xl px-4 pb-tabbar lg:px-10 lg:pb-16">
+          <div className="mx-auto w-full max-w-6xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16">
             <LibraryScreen />
           </div>
           <TabBar />
diff --git a/components/ApiKeyGate.tsx b/components/ApiKeyGate.tsx
index bd8626f..39af5f4 100644
--- a/components/ApiKeyGate.tsx
+++ b/components/ApiKeyGate.tsx
@@ -118,7 +118,7 @@ function GateScreen() {
   };
 
   return (
-    <div className="gate-bg relative min-h-dvh w-full overflow-hidden">
+    <div className="gate-bg fixed inset-0 overflow-hidden overscroll-none">
       {/* corner controls: theme + help ---------------------------------- */}
       <div
         className="fixed z-20 flex items-center gap-2"
@@ -153,7 +153,7 @@ function GateScreen() {
       </div>
 
       {/* card ----------------------------------------------------------- */}
-      <div className="relative z-10 flex min-h-[100dvh] items-center justify-center px-5 py-10">
+      <div className="relative z-10 flex h-full items-center justify-center overflow-y-auto overscroll-contain px-5 py-10">
         <motion.div
           initial={reduceMotion ? false : { opacity: 0, y: 14 }}
           animate={{ opacity: 1, y: 0 }}
diff --git a/components/ui.tsx b/components/ui.tsx
index 3766877..2d1c571 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -134,7 +134,7 @@ export function EmptyState({
   action?: React.ReactNode;
 }) {
   return (
-    <div className="animate-rise flex flex-col items-center px-6 py-16 text-center sm:py-24">
+    <div className="animate-rise flex flex-col items-center px-6 py-6 text-center sm:py-24">
       <span
         className="mb-4 grid size-12 place-items-center rounded-2xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-subtle)]"
         aria-hidden