From 5712eefe066e977e9a3e15efe27c545b55aab084 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:24:37 -0400
Subject: [PATCH] fix(docs): polish homepage AI setup prompt (#48318)

## What kind of change does this PR introduce?

Bug fix / docs UI polish.

## What is the current behavior?

The homepage AI Prompt panel:

- Has an `expandable` feature but its overflow contents are ~1 line
extra
- Expanding it affects the cover height and causes layout shift
- Below `xl`, the hero stacked and the logo sat alone above the title on
small screens.

## What is the new behavior?

- Shows the full AI setup prompt by default and removes the unused
`expandable` machinery from `PromptPanel`
- Keeps both tab panes in a shared grid cell so the panel height stays
stable when switching tabs
- Keeps logo + title in a row at all sizes, and starts the side-by-side
hero (copy + prompt) at `lg` instead of `xl`

| Before | After |
| --- | --- |
| <img width="1279" height="722" alt="15728"
src="https://github.com/user-attachments/assets/c61fdbbc-706c-47cf-8b47-4245d4c96215"
/> | <img width="1280" height="722" alt="Supabase Docs"
src="https://github.com/user-attachments/assets/ab3a97a4-d725-4d9e-92bf-6f564a22f1bd"
/> |
| <img width="1279" height="722" alt="Supabase Docs"
src="https://github.com/user-attachments/assets/42906c4b-4f82-4fbc-8bab-3f5d9530aa54"
/> | <img width="1280" height="722" alt="Supabase Docs"
src="https://github.com/user-attachments/assets/177a17d7-536c-4bd6-a8d0-1a2bc10f3ac9"
/> |
| <img width="1012" height="722" alt="96312"
src="https://github.com/user-attachments/assets/032a3b43-078f-4d13-a67d-9a36c76a9be5"
/> | <img width="1012" height="722" alt="Supabase Docs"
src="https://github.com/user-attachments/assets/f3ff3c0a-6df8-4e61-bfcb-ab99e99cccea"
/> |

## To test

Play around with the docs homepage AI Prompt panel on the Vercel preview
at various breakpoints:
https://docs-git-dnywh-docs-ai-prompt-expanded-supabase.vercel.app/

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Improved prompt panel tab navigation with manual activation for more
predictable switching and enhanced accessibility.
- Inactive tab panels now remain mounted while reflecting
active/inactive state for smoother transitions.

- **Style**
- Refined the documentation homepage cover layout, including responsive
alignment, logo sizing behavior, and updated heading/paragraph spacing.
- Updated setup prompt presentation and refined expandable prompt sizing
and control styling.

- **Bug Fixes**
- Inactive prompt content is now hidden and non-interactive, preventing
unintended interaction.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/components/HomePageCover.tsx | 16 +++++++------
 apps/docs/features/ui/PromptPanel.tsx  | 32 +++++++++++++++++++-------
 2 files changed, 33 insertions(+), 15 deletions(-)

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>
   )
 }