From ac870367aadf04f147558e2b07ce2fa666362a45 Mon Sep 17 00:00:00 2001
From: phact <estevezsebastian@gmail.com>
Date: Fri, 24 Oct 2025 01:59:42 -0400
Subject: [PATCH] spacing fix

---
 .../components/onboarding-content.tsx             |  1 +
 .../new-onboarding/components/onboarding-step.tsx | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/new-onboarding/components/onboarding-content.tsx b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
index addcfdc2..728ebb1f 100644
--- a/frontend/src/app/new-onboarding/components/onboarding-content.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
@@ -83,6 +83,7 @@ export function OnboardingContent({
 						text="Let's get started by setting up your model provider."
 						isLoadingModels={isLoadingModels}
 						loadingStatus={loadingStatus}
+						reserveSpaceForThinking={true}
 					>
 						<OnboardingCard
 							onComplete={handleStepComplete}
diff --git a/frontend/src/app/new-onboarding/components/onboarding-step.tsx b/frontend/src/app/new-onboarding/components/onboarding-step.tsx
index 72efb033..f58aec69 100644
--- a/frontend/src/app/new-onboarding/components/onboarding-step.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-step.tsx
@@ -16,6 +16,7 @@ interface OnboardingStepProps {
   hideIcon?: boolean;
   isLoadingModels?: boolean;
   loadingStatus?: string[];
+  reserveSpaceForThinking?: boolean;
 }
 
 export function OnboardingStep({
@@ -28,6 +29,7 @@ export function OnboardingStep({
   hideIcon = false,
   isLoadingModels = false,
   loadingStatus = [],
+  reserveSpaceForThinking = false,
 }: OnboardingStepProps) {
   const [displayedText, setDisplayedText] = useState("");
   const [showChildren, setShowChildren] = useState(false);
@@ -151,7 +153,7 @@ export function OnboardingStep({
                 )}
                 chatMessage={text}
               />
-          ) : (
+          ) : reserveSpaceForThinking ? (
             <div className="flex flex-col gap-2 py-1.5">
               <p
                 className={`text-foreground text-sm transition-colors duration-300 ${
@@ -165,6 +167,17 @@ export function OnboardingStep({
               </p>
               <div className="h-6" />
             </div>
+          ) : (
+            <p
+              className={`text-foreground text-sm py-1.5 transition-colors duration-300 ${
+                isCompleted ? "text-placeholder-foreground" : ""
+              }`}
+            >
+              {displayedText}
+              {!showChildren && !isCompleted && (
+                <span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
+              )}
+            </p>
           )}
           {children && (
             <AnimatePresence>