From 1bceeb0418a010a336ef43d275c2204fab2d8128 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Thu, 16 Apr 2026 21:43:15 -0500
Subject: [PATCH] Move onboarding to auth layout for consistent setup
 experience

The onboarding wizard was wrapped in the dashboard layout (sidebar +
topbar), which felt jarring when coming from the clean workspace-setup
page. Moved it to the (auth) layout so the entire setup flow stays in
the same centered, chrome-free experience. Widened the auth layout to
max-w-3xl and added max-w-md to each narrow auth page individually.

Made-with: Cursor
---
 src/app/(auth)/invite/[token]/page.tsx        |  6 ++---
 src/app/(auth)/layout.tsx                     |  2 +-
 src/app/(auth)/login/page.tsx                 |  2 +-
 .../onboarding/page.tsx                       | 26 +++++++++----------
 src/app/(auth)/setup/page.tsx                 |  2 +-
 src/app/(auth)/signup/page.tsx                |  2 +-
 src/app/(auth)/workspace-setup/page.tsx       |  2 +-
 7 files changed, 20 insertions(+), 22 deletions(-)
 rename src/app/{(dashboard) => (auth)}/onboarding/page.tsx (98%)

diff --git a/src/app/(auth)/invite/[token]/page.tsx b/src/app/(auth)/invite/[token]/page.tsx
index 0258064..73a8968 100644
--- a/src/app/(auth)/invite/[token]/page.tsx
+++ b/src/app/(auth)/invite/[token]/page.tsx
@@ -29,7 +29,7 @@ export default function InvitePage() {
 
   if (status === "loading") {
     return (
-      <div className="glass-card flex flex-col items-center rounded-2xl p-8">
+      <div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8">
         <Loader2 className="size-8 animate-spin text-muted-foreground" />
         <p className="mt-4 text-sm text-muted-foreground">Verifying invitation...</p>
       </div>
@@ -38,7 +38,7 @@ export default function InvitePage() {
 
   if (status === "invalid") {
     return (
-      <div className="glass-card flex flex-col items-center rounded-2xl p-8 text-center">
+      <div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8 text-center">
         <XCircle className="mb-4 size-12 text-destructive" />
         <h1 className="text-xl font-bold">Invalid Invitation</h1>
         <p className="mt-2 text-sm text-muted-foreground">
@@ -56,7 +56,7 @@ export default function InvitePage() {
   }
 
   return (
-    <div className="glass-card flex flex-col items-center rounded-2xl p-8 text-center">
+    <div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8 text-center">
       <div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
         <ScanLine className="size-7 text-white" />
       </div>
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 6eac8cf..8301279 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -6,7 +6,7 @@ export default function AuthLayout({
   return (
     <div className="relative flex min-h-screen items-center justify-center">
       <div className="gradient-mesh pointer-events-none fixed inset-0 z-0" />
-      <div className="relative z-10 w-full max-w-md p-4">{children}</div>
+      <div className="relative z-10 w-full max-w-3xl p-4">{children}</div>
     </div>
   );
 }
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index baf717d..8f55335 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -53,7 +53,7 @@ function LoginForm() {
   }
 
   return (
-    <div className="glass-card w-full rounded-2xl p-8">
+    <div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
       <div className="mb-8 flex flex-col items-center">
         <div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
           <ScanLine className="size-7 text-white" />
diff --git a/src/app/(dashboard)/onboarding/page.tsx b/src/app/(auth)/onboarding/page.tsx
similarity index 98%
rename from src/app/(dashboard)/onboarding/page.tsx
rename to src/app/(auth)/onboarding/page.tsx
index 5873144..8bbe6af 100644
--- a/src/app/(dashboard)/onboarding/page.tsx
+++ b/src/app/(auth)/onboarding/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
 import {
   Building2,
   MapPin,
@@ -60,7 +59,6 @@ const TIMEZONES = [
 ];
 
 export default function OnboardingPage() {
-  const router = useRouter();
   const [currentStep, setCurrentStep] = useState(0);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
@@ -97,14 +95,14 @@ export default function OnboardingPage() {
       .then((r) => r.json())
       .then((data) => {
         if (data.onboardingComplete) {
-          router.replace("/");
+          window.location.href = "/";
           return;
         }
         setCurrentStep(data.currentStep || 0);
       })
       .catch(() => {})
       .finally(() => setLoading(false));
-  }, [router]);
+  }, []);
 
   const submitStep = useCallback(
     async (step: number, data: Record<string, unknown>) => {
@@ -141,7 +139,7 @@ export default function OnboardingPage() {
         setSubmitting(false);
       }
     },
-    [router]
+    []
   );
 
   function handleOrgSubmit(e: React.FormEvent) {
@@ -943,8 +941,8 @@ export default function OnboardingPage() {
             </div>
 
             <div className="grid gap-3 text-left sm:grid-cols-3">
-              <button
-                onClick={() => router.push("/cards")}
+              <a
+                href="/cards"
                 className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
               >
                 <Upload className="size-5 text-primary" />
@@ -954,9 +952,9 @@ export default function OnboardingPage() {
                 <span className="text-xs text-muted-foreground">
                   Scan and process a response card
                 </span>
-              </button>
-              <button
-                onClick={() => router.push("/settings/users")}
+              </a>
+              <a
+                href="/settings/users"
                 className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
               >
                 <Building2 className="size-5 text-primary" />
@@ -966,9 +964,9 @@ export default function OnboardingPage() {
                 <span className="text-xs text-muted-foreground">
                   Add reviewers and editors
                 </span>
-              </button>
-              <button
-                onClick={() => router.push("/")}
+              </a>
+              <a
+                href="/"
                 className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
               >
                 <PartyPopper className="size-5 text-primary" />
@@ -978,7 +976,7 @@ export default function OnboardingPage() {
                 <span className="text-xs text-muted-foreground">
                   See your workspace overview
                 </span>
-              </button>
+              </a>
             </div>
 
             <Button
diff --git a/src/app/(auth)/setup/page.tsx b/src/app/(auth)/setup/page.tsx
index 4b9abbb..a89d0cd 100644
--- a/src/app/(auth)/setup/page.tsx
+++ b/src/app/(auth)/setup/page.tsx
@@ -117,7 +117,7 @@ export default function SetupPage() {
   }
 
   return (
-    <div className="glass-card w-full max-w-lg rounded-2xl p-8">
+    <div className="glass-card mx-auto w-full max-w-lg rounded-2xl p-8">
       <div className="mb-8 flex flex-col items-center">
         <div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
           <ScanLine className="size-7 text-white" />
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index 6f0f44b..89741b1 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -81,7 +81,7 @@ function SignupForm() {
   }
 
   return (
-    <div className="glass-card w-full rounded-2xl p-8">
+    <div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
       <div className="mb-8 flex flex-col items-center">
         <div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
           <ScanLine className="size-7 text-white" />
diff --git a/src/app/(auth)/workspace-setup/page.tsx b/src/app/(auth)/workspace-setup/page.tsx
index ee968d3..154fdf0 100644
--- a/src/app/(auth)/workspace-setup/page.tsx
+++ b/src/app/(auth)/workspace-setup/page.tsx
@@ -34,7 +34,7 @@ export default function WorkspaceSetupPage() {
   }
 
   return (
-    <div className="glass-card w-full rounded-2xl p-8">
+    <div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
       <div className="mb-8 flex flex-col items-center">
         <div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
           <ScanLine className="size-7 text-white" />