From e1176fbb269c98752d96c5e28fc990598b09b4d4 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Mon, 29 Jun 2026 21:13:32 -0400
Subject: [PATCH] fix: make auth canvas scroll actually constrain on short
 viewports (#1523)

PR #1521 added max-height and overflow-y-auto but the card stayed content-
sized because flex items default to min-height:auto and justify-center
clipped overflow while html/body stay overflow:hidden. Add min-h-0 and
my-auto, use dvh, scroll the auth shell, and pin Enter Sencho outside the
preflight scroll region.
---
 frontend/src/components/Setup.tsx             | 22 ++++++++++---------
 .../src/components/auth/AuthCanvas.test.tsx   |  7 +++++-
 frontend/src/components/auth/AuthCanvas.tsx   |  7 ++++--
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Setup.tsx b/frontend/src/components/Setup.tsx
index 6d877ff2..5784f750 100644
--- a/frontend/src/components/Setup.tsx
+++ b/frontend/src/components/Setup.tsx
@@ -93,9 +93,18 @@ export function Setup({ onComplete, className, ...props }: SetupProps & React.Co
       <div className={cn('relative', className)} {...props}>
         <AuthCanvas
           footer={
-            <div className="flex items-center justify-between">
-              <span>Console · First boot</span>
-              <span className="text-stat-subtitle/70">Account ready</span>
+            <div className="flex flex-col gap-4">
+              <Button
+                type="button"
+                onClick={onComplete}
+                className="h-11 w-full bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
+              >
+                Enter Sencho<ArrowRight strokeWidth={1.5} />
+              </Button>
+              <div className="flex items-center justify-between border-t border-card-border/60 pt-3">
+                <span>Console · First boot</span>
+                <span className="text-stat-subtitle/70">Account ready</span>
+              </div>
             </div>
           }
         >
@@ -106,13 +115,6 @@ export function Setup({ onComplete, className, ...props }: SetupProps & React.Co
               caption="A quick check that this host can run Docker deploys. Warnings won't stop you; each one carries a fix."
             />
             <EnvironmentChecks />
-            <Button
-              type="button"
-              onClick={onComplete}
-              className="h-11 w-full bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90"
-            >
-              Enter Sencho<ArrowRight strokeWidth={1.5} />
-            </Button>
           </div>
         </AuthCanvas>
       </div>
diff --git a/frontend/src/components/auth/AuthCanvas.test.tsx b/frontend/src/components/auth/AuthCanvas.test.tsx
index e02a7b9a..bf5ee476 100644
--- a/frontend/src/components/auth/AuthCanvas.test.tsx
+++ b/frontend/src/components/auth/AuthCanvas.test.tsx
@@ -11,9 +11,14 @@ describe('AuthCanvas', () => {
     );
 
     const card = screen.getByRole('group');
-    expect(card.className).toContain('max-h-[calc(100svh-5rem)]');
+    expect(card.className).toContain('max-h-[calc(100dvh-5rem)]');
+    expect(card.className).toContain('min-h-0');
+    expect(card.className).toContain('my-auto');
     expect(card.className).toContain('flex-col');
 
+    const shell = card.parentElement;
+    expect(shell?.className).toContain('overflow-y-auto');
+
     const body = screen.getByText('Tall content').parentElement;
     expect(body?.className).toContain('overflow-y-auto');
     expect(body?.className).toContain('min-h-0');
diff --git a/frontend/src/components/auth/AuthCanvas.tsx b/frontend/src/components/auth/AuthCanvas.tsx
index f4a936ec..c92bf948 100644
--- a/frontend/src/components/auth/AuthCanvas.tsx
+++ b/frontend/src/components/auth/AuthCanvas.tsx
@@ -9,7 +9,10 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
   return (
     <div
       className={cn(
-        'relative flex min-h-svh flex-col items-center justify-center px-4 py-10 sm:px-6',
+        // overflow-y-auto: html/body are overflow:hidden, so this shell must scroll
+        // when the card still exceeds the viewport. my-auto on the card centers it
+        // when content is short (replaces justify-center, which clips tall cards).
+        'relative flex min-h-svh flex-col items-center overflow-y-auto px-4 py-10 sm:px-6',
         className,
       )}
       {...props}
@@ -21,7 +24,7 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
 
       <div
         role="group"
-        className="relative flex max-h-[calc(100svh-5rem)] w-full max-w-[440px] flex-col animate-scale-in overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel"
+        className="relative my-auto flex min-h-0 w-full max-w-[440px] max-h-[calc(100dvh-5rem)] flex-col animate-scale-in overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel"
         style={{ animationDuration: 'var(--duration-base)', animationTimingFunction: 'var(--ease-out-expo)' }}
       >
         <div aria-hidden className="absolute inset-y-0 left-0 w-[3px] overflow-hidden bg-brand/70">