Make the page exactly viewport-height — kill the competing page scroll

The dashboard's fixed lg:h-[min(620px,100vh-220px)] under-counted the chrome
(header + footer + padding ≈ 250px, not 220), so on shorter laptops the page
overflowed by ~20px → a window scrollbar on TOP of the panel scroll (the
double-scroll in the screenshot). To the "overflow on main/body?" question: no —
overflow + fixed height clips at the padding edge, which is the bug. Instead the
page is now a viewport-tall flex column (lg:h-screen) with the dashboard filling
the flex-1 slot, so there is ONE scroll context — inside the queue/trace panels —
and no page scroll. Footer/socials stay visible.

Verified across 1280×800 / 1440×900 / 1536×864: pageScrolls=false,
footerVisible=true, queue scrolls internally (pill now reads "1 more"). typecheck
· knip · 82 tests · build · e2e 3/3 all green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DylanMerigaud

app/page.tsx

@@ -29,15 +29,20 @@ export default async function Page() {
   }
 
   return (
-    <main className="mx-auto max-w-[1200px] px-4 py-6 sm:px-6 sm:py-8">
+    // On desktop the page is exactly viewport-tall (flex column) so there is ONE
+    // scroll context — inside the queue/trace panels — not a competing page
+    // scroll. On mobile it falls back to natural height + normal page scroll.
+    <main className="mx-auto flex max-w-[1200px] flex-col px-4 py-6 sm:px-6 sm:py-8 lg:h-screen">
       <Header />
-      {dbError ? (
-        <SetupNotice detail={dbError} />
-      ) : queue.length === 0 ? (
-        <SetupNotice detail="The database is reachable but empty — run `pnpm db:seed` to load the demo invoices." />
-      ) : (
-        <Dashboard queue={queue} />
-      )}
+      <div className="min-h-0 flex-1">
+        {dbError ? (
+          <SetupNotice detail={dbError} />
+        ) : queue.length === 0 ? (
+          <SetupNotice detail="The database is reachable but empty — run `pnpm db:seed` to load the demo invoices." />
+        ) : (
+          <Dashboard queue={queue} />
+        )}
+      </div>
       <Footer />
     </main>
   );

components/dashboard.tsx

@@ -61,10 +61,10 @@ export function Dashboard({ queue }: { queue: QueueItem[] }) {
   }
 
   return (
-    // A fixed, sensible viewport-relative height (not full-bleed stretch) so the
-    // two panes sit side by side, each scrolling internally, and the page footer
-    // stays reachable. On mobile they stack at natural height.
-    <div className="grid grid-cols-1 gap-4 lg:h-[min(620px,calc(100vh-220px))] lg:grid-cols-[minmax(300px,380px)_1fr]">
+    // Desktop: fill the parent's flex-1 slot (the page is viewport-tall), so the
+    // two panes sit side by side and scroll INTERNALLY — no competing page
+    // scroll. Mobile: stack at natural height.
+    <div className="grid grid-cols-1 gap-4 lg:h-full lg:grid-cols-[minmax(300px,380px)_1fr]">
       {/* LEFT — queue */}
       <Card className="flex max-h-[70vh] flex-col overflow-hidden lg:max-h-none">
         <CardHeader className="flex items-center justify-between">