From da73ee071795fedd2f499476f8361f2e6cb0c5a8 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Mon, 29 Jun 2026 20:28:51 -0400
Subject: [PATCH] fix: scroll auth canvas when preflight content overflows
 (#1521)

Cap the auth card height and scroll its body so setup preflight checks
remain reachable on short viewports without clipping the Enter action.
---
 .../src/components/auth/AuthCanvas.test.tsx   | 36 +++++++++++++++++++
 frontend/src/components/auth/AuthCanvas.tsx   |  8 ++---
 2 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/auth/AuthCanvas.test.tsx

diff --git a/frontend/src/components/auth/AuthCanvas.test.tsx b/frontend/src/components/auth/AuthCanvas.test.tsx
new file mode 100644
index 00000000..e02a7b9a
--- /dev/null
+++ b/frontend/src/components/auth/AuthCanvas.test.tsx
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AuthCanvas } from './AuthCanvas';
+
+describe('AuthCanvas', () => {
+  it('caps card height and scrolls overflowing body content', () => {
+    render(
+      <AuthCanvas footer={<span>Footer copy</span>}>
+        <p>Tall content</p>
+      </AuthCanvas>,
+    );
+
+    const card = screen.getByRole('group');
+    expect(card.className).toContain('max-h-[calc(100svh-5rem)]');
+    expect(card.className).toContain('flex-col');
+
+    const body = screen.getByText('Tall content').parentElement;
+    expect(body?.className).toContain('overflow-y-auto');
+    expect(body?.className).toContain('min-h-0');
+    expect(body?.className).toContain('flex-1');
+  });
+
+  it('keeps header and footer outside the scroll region', () => {
+    render(
+      <AuthCanvas footer={<span>Footer copy</span>}>
+        <p>Body</p>
+      </AuthCanvas>,
+    );
+
+    const header = screen.getByText('SENCHO').parentElement;
+    const footer = screen.getByText('Footer copy').parentElement;
+
+    expect(header?.className).toContain('shrink-0');
+    expect(footer?.className).toContain('shrink-0');
+  });
+});
diff --git a/frontend/src/components/auth/AuthCanvas.tsx b/frontend/src/components/auth/AuthCanvas.tsx
index 1a85cc52..f4a936ec 100644
--- a/frontend/src/components/auth/AuthCanvas.tsx
+++ b/frontend/src/components/auth/AuthCanvas.tsx
@@ -21,14 +21,14 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
 
       <div
         role="group"
-        className="relative w-full max-w-[440px] 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 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"
         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">
           <div className="animate-shimmer absolute inset-x-0 h-1/3 bg-gradient-to-b from-transparent via-white/60 to-transparent" />
         </div>
 
-        <div className="flex items-center justify-between border-b border-card-border/60 px-7 pt-6 pb-4">
+        <div className="flex shrink-0 items-center justify-between border-b border-card-border/60 px-7 pt-6 pb-4">
           <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-stat-subtitle">
             SENCHO
           </span>
@@ -38,10 +38,10 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
           </span>
         </div>
 
-        <div className="px-7 pb-7 pt-6">{children}</div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-7 pb-7 pt-6">{children}</div>
 
         {footer && (
-          <div className="border-t border-card-border/60 px-7 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
+          <div className="shrink-0 border-t border-card-border/60 px-7 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
             {footer}
           </div>
         )}