fix: improve onboarding

apps/start/src/routes/_steps.tsx

@@ -1,14 +1,7 @@
-import { OnboardingLeftPanel } from '@/components/onboarding-left-panel';
+import { createFileRoute, Outlet, useMatchRoute } from '@tanstack/react-router';
 import { SkeletonDashboard } from '@/components/skeleton-dashboard';
 import { cn } from '@/utils/cn';
-import { PAGE_TITLES, createEntityTitle } from '@/utils/title';
-import {
-  Outlet,
-  createFileRoute,
-  redirect,
-  useLocation,
-  useMatchRoute,
-} from '@tanstack/react-router';
+import { createEntityTitle, PAGE_TITLES } from '@/utils/title';
 
 export const Route = createFileRoute('/_steps')({
   component: OnboardingLayout,
@@ -19,13 +12,18 @@ export const Route = createFileRoute('/_steps')({
 
 function OnboardingLayout() {
   return (
-    <div className="relative min-h-screen pt-32 pb-8">
+    <div className="relative flex min-h-screen items-center justify-center p-4">
       <div className="fixed inset-0 hidden md:block">
         <SkeletonDashboard />
+        <div className="fixed inset-0 z-10 bg-def-100/50" />
       </div>
-      <div className="relative z-10 border bg-background rounded-lg shadow-xl shadow-muted/50 max-w-xl mx-auto">
-        <Progress />
-        <Outlet />
+      <div className="relative z-10 flex max-h-[calc(100vh-2rem)] w-full max-w-xl flex-col overflow-hidden rounded-lg border bg-background shadow-muted/50 shadow-xl">
+        <div className="sticky top-0 z-10 flex-shrink-0 border-b bg-background">
+          <Progress />
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col">
+          <Outlet />
+        </div>
       </div>
     </div>
   );
@@ -53,18 +51,18 @@ function Progress() {
       // @ts-expect-error
       from: step.match,
       fuzzy: false,
-    }),
+    })
   );
 
   return (
-    <div className="row gap-4 p-4 border-b justify-between items-center flex-1 w-full">
+    <div className="row w-full flex-shrink-0 items-center justify-between gap-4 p-4">
       <div className="font-bold">{currentStep?.name ?? 'Onboarding'}</div>
       <div className="row gap-4">
         {steps.map((step) => (
           <div
             className={cn(
-              'w-10 h-2 rounded-full bg-muted',
-              currentStep === step && 'w-20 bg-primary',
+              'h-2 w-10 rounded-full bg-muted',
+              currentStep === step && 'w-20 bg-primary'
             )}
             key={step.match}
           />