Rendered onboarding with use-stick-to-bottom

frontend/package-lock.json

@@ -52,6 +52,7 @@
         "sonner": "^2.0.6",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
+        "use-stick-to-bottom": "^1.1.1",
         "zustand": "^5.0.8"
       },
       "devDependencies": {
@@ -10224,6 +10225,15 @@
         }
       }
     },
+    "node_modules/use-stick-to-bottom": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-stick-to-bottom/-/use-stick-to-bottom-1.1.1.tgz",
+      "integrity": "sha512-JkDp0b0tSmv7HQOOpL1hT7t7QaoUBXkq045WWWOFDTlLGRzgIIyW7vyzOIJzY7L2XVIG7j1yUxeDj2LHm9Vwng==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",

frontend/package.json

@@ -53,6 +53,7 @@
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
+    "use-stick-to-bottom": "^1.1.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

frontend/src/app/new-onboarding/components/onboarding-content.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { StickToBottom } from "use-stick-to-bottom";
 import { AssistantMessage } from "@/app/chat/components/assistant-message";
 import { UserMessage } from "@/app/chat/components/user-message";
 import Nudges from "@/app/chat/nudges";
@@ -57,7 +58,14 @@ export function OnboardingContent({
 	const displayMessage = streamingMessage || assistantMessage;
 
 	return (
-		<div className="space-y-6">
+		<StickToBottom
+			className="flex h-full flex-1 flex-col"
+			resize="smooth"
+			initial="instant"
+			mass={1}
+		>
+			<StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden px-8 py-6">
+				<div className="flex flex-col place-self-center w-full space-y-6">
 					<OnboardingStep
 						isVisible={currentStep >= 0}
 						isCompleted={currentStep > 0}
@@ -82,11 +90,16 @@ export function OnboardingContent({
 
 					{/* User message - show when nudge is selected */}
 					{currentStep >= 1 && !!selectedNudge && (
-				<UserMessage content={selectedNudge} isCompleted={currentStep > 1} />
+						<UserMessage
+							content={selectedNudge}
+							isCompleted={currentStep > 1}
+						/>
 					)}
 
 					{/* Assistant message - show streaming or final message */}
-			{currentStep >= 1 && !!selectedNudge && (displayMessage || isLoading) && (
+					{currentStep >= 1 &&
+						!!selectedNudge &&
+						(displayMessage || isLoading) && (
 							<>
 								<AssistantMessage
 									content={displayMessage?.content || ""}
@@ -108,7 +121,8 @@ export function OnboardingContent({
 										</button>
 									</div>
 								)}
-			</>)}
+							</>
+						)}
 
 					<OnboardingStep
 						isVisible={currentStep >= 2}
@@ -148,5 +162,7 @@ export function OnboardingContent({
 						</div>
 					</OnboardingStep>
 				</div>
+			</StickToBottom.Content>
+		</StickToBottom>
 	);
 }

frontend/src/components/chat-renderer.tsx

@@ -156,7 +156,7 @@ export function ChatRenderer({
               showLayout && "p-6 container",
               showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
               !showLayout &&
-                "w-full bg-card rounded-lg shadow-2xl p-8 overflow-y-auto",
+                "w-full bg-card rounded-lg shadow-2xl p-0 py-2 overflow-y-auto",
             )}
           >
             <motion.div