move home chat to optical center

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -309,11 +309,12 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
         <div className='absolute top-[8.5px] right-[16px] z-10'>
           <CreditsChip />
         </div>
-        <div className='flex min-h-full flex-col items-center px-6 pt-[24vh] pb-[2vh]'>
+        {/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
+        <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
           <h1 className='mb-7 max-w-[48rem] text-balance font-season text-[30px] text-[var(--text-primary)]'>
             What should we get done{firstName ? `, ${firstName}` : ''}?
           </h1>
-          <div ref={initialViewInputRef} className='w-full'>
+          <div ref={initialViewInputRef} className='relative w-full max-w-[48rem]'>
             <UserInput
               ref={initialViewUserInputRef}
               defaultValue={initialPrompt}
@@ -325,9 +326,12 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
               onContextAdd={handleContextAdd}
               onContextRemove={handleInitialContextRemove}
             />
-            <SuggestedActions
-              onSelectPrompt={(prompt) => initialViewUserInputRef.current?.populatePrompt(prompt)}
-            />
+            {/* Anchored out of flow so expanding/collapsing never shifts the centered input */}
+            <div className='absolute inset-x-0 top-full'>
+              <SuggestedActions
+                onSelectPrompt={(prompt) => initialViewUserInputRef.current?.populatePrompt(prompt)}
+              />
+            </div>
           </div>
         </div>
       </div>