diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index 20594847923..c6beedac8cf 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -20,7 +20,7 @@ const fullGettingStartedEnabled = isFeatureEnabled('docs:full_getting_started')
 function SetupPrompt({ cliCode }: { cliCode: ReactNode }) {
   return (
     <PromptPanel>
-      <Prompt value="prompt" expandable>
+      <Prompt value="prompt">
         <PromptTitle icon={<Sparkles />}>AI Prompt</PromptTitle>
         <PromptCopy>{setupPrompt}</PromptCopy>
         <PromptContent>
@@ -56,19 +56,21 @@ const HomePageCover = ({ title, cliCode }: { title: string; cliCode: ReactNode }
   return (
     <div className="w-full border-b bg-muted/10">
       <div className="mx-auto max-w-7xl px-6 py-16">
-        <div className="flex flex-col items-start gap-10 xl:flex-row xl:items-center xl:gap-16">
-          <div className="flex w-full flex-1 flex-col gap-4 sm:flex-row sm:items-center sm:gap-8">
-            <DocsCoverLogo aria-hidden="true" className="w-[60px] shrink-0 md:w-[100px]" />
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-center lg:gap-12 xl:gap-16">
+          <div className="flex w-full min-w-0 flex-1 items-center gap-4 sm:gap-8">
+            <DocsCoverLogo aria-hidden="true" className="w-12 shrink-0 sm:w-[60px] md:w-[100px]" />
             <div className="flex min-w-0 flex-col">
-              <h1 className="m-0 text-4xl text-foreground">{homepageHeading || title}</h1>
-              <p className="m-0 mt-3 text-xl leading-7 text-foreground-light">
+              <h1 className="m-0 text-3xl text-foreground sm:text-4xl">
+                {homepageHeading || title}
+              </h1>
+              <p className="m-0 mt-2 text-base leading-7 text-foreground-light sm:mt-3 sm:text-xl">
                 Learn how to get up and running with Supabase through tutorials, APIs and platform
                 resources.
               </p>
             </div>
           </div>
           {fullGettingStartedEnabled && (
-            <div className="w-full max-w-xl xl:max-w-[478px] xl:shrink-0">
+            <div className="w-full lg:max-w-[478px] lg:shrink-0">
               <SetupPrompt cliCode={cliCode} />
             </div>
           )}
diff --git a/apps/docs/features/ui/PromptPanel.tsx b/apps/docs/features/ui/PromptPanel.tsx
index 7cbc87363a4..9c3e5d23d53 100644
--- a/apps/docs/features/ui/PromptPanel.tsx
+++ b/apps/docs/features/ui/PromptPanel.tsx
@@ -124,7 +124,7 @@ function ExpandableContent({ children }: { children: ReactNode }) {
   return (
     <div>
       <div className="relative">
-        <div className={cn(!isExpanded && 'max-h-30 overflow-hidden')}>{children}</div>
+        <div className={cn(!isExpanded && 'max-h-28 overflow-hidden')}>{children}</div>
         {!isExpanded && (
           <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-background to-transparent" />
         )}
@@ -133,7 +133,7 @@ function ExpandableContent({ children }: { children: ReactNode }) {
         tabIndex={0}
         type="button"
         onClick={() => setIsExpanded((expanded) => !expanded)}
-        className="mt-2 text-sm text-brand-link transition-colors hover:text-brand focus-ring"
+        className="mt-2 cursor-pointer text-sm text-brand-link transition-colors hover:text-foreground focus-ring"
         aria-expanded={isExpanded}
       >
         {isExpanded ? 'Show less' : 'Show more'}
@@ -167,7 +167,7 @@ function PromptBody({
   )
 
   return (
-    <div className="px-4 py-3.5 text-sm leading-6 text-foreground-light">
+    <div className="px-4 py-3.5 text-sm leading-6 text-foreground-light font-normal">
       {prompt.expandable ? <ExpandableContent>{content}</ExpandableContent> : content}
     </div>
   )
@@ -296,16 +296,32 @@ function PromptPanel({ children, className }: PromptPanelProps) {
     <Tabs
       value={activeTab}
       onValueChange={setActiveTab}
+      // Manual activation keeps VoiceOver focus from switching tabs before Copy is reached.
+      activationMode="manual"
       onFocusCapture={dismissShimmer}
       onPointerEnter={dismissShimmer}
       className={cn('w-full overflow-hidden rounded-lg border bg-background shadow-sm', className)}
     >
       {header}
-      {prompts.map((prompt) => (
-        <TabsContent key={prompt.value} value={prompt.value} className="m-0">
-          <PromptBody prompt={prompt} shimmerEnabled={shimmerEnabled} />
-        </TabsContent>
-      ))}
+      {/* Stack panes in one grid cell so the panel keeps the tallest tab's height. */}
+      <div className="grid">
+        {prompts.map((prompt) => {
+          const isActive = prompt.value === activeTab
+
+          return (
+            <TabsContent
+              key={prompt.value}
+              value={prompt.value}
+              forceMount
+              inert={!isActive}
+              aria-hidden={!isActive}
+              className="col-start-1 row-start-1 m-0 data-[state=inactive]:invisible data-[state=inactive]:pointer-events-none"
+            >
+              <PromptBody prompt={prompt} shimmerEnabled={shimmerEnabled} />
+            </TabsContent>
+          )
+        })}
+      </div>
     </Tabs>
   )
 }