Getting started: open the alternate setups in a modal instead of <details>

Expanding the native <details> block pushed the sections below it around.
The new ModalRow keeps the collapsed paths as a one-line row and opens
them in a dialog, so revealing them never shifts the layout. The content
stays mounted inside the closed dialog, so the prompts remain in the
server-rendered HTML for crawlers (verified against the raw response),
and llm-markdown collapses ModalRow to a bold title plus body so the .md
output stays clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: ankur-arch

apps/docs/content/docs/(index)/index.mdx

@@ -90,11 +90,15 @@ If you're using Express or another Node.js server, follow the [existing-project
 
 <SectionRow title="Other setups" description="Already have an app or a database, or need a single Prisma product on its own? Each path has a guide to follow and a prompt to hand to your agent.">
 
-{/* Native <details> keeps the collapsed paths in the static HTML for crawlers
-    and agents, and stays keyboard-accessible without client JS. */}
+{/* ModalRow keeps the collapsed paths mounted in the served HTML for crawlers
+    and agents; opening them in a modal never shifts the layout below. */}
 
-<details className="group rounded-xl border bg-fd-card px-4 py-1 open:pb-3">
-<summary className="cursor-pointer select-none py-2.5 text-sm font-medium text-fd-foreground marker:text-fd-muted-foreground hover:text-fd-primary">Existing project, your own database, or a single product (ORM, Postgres, or Compute) on its own</summary>
+<ModalRow
+  title="Existing project, your own database, or a single product on its own"
+  description="Five paths: add to an existing project, bring your own Postgres, or use the ORM, Postgres, or Compute alone."
+  modalTitle="Other setup paths"
+  icon={<FolderPlus />}
+>
 
 <AgentPrompt title="Add Prisma to an existing project" guideHref="/next/add-to-existing-project/postgresql" guideTitle="PostgreSQL guide" icon={<FolderPlus />}>
 
@@ -177,7 +181,7 @@ Current docs: https://www.prisma.io/docs/prisma-compute/deploy.md.
 
 If you're using MongoDB, follow the [MongoDB quickstart](/next/quickstart/mongodb) or [add Prisma Next to an existing MongoDB app](/next/add-to-existing-project/mongodb). If you work with [Kysely](/prisma-postgres/quickstart/kysely), [Drizzle](/prisma-postgres/quickstart/drizzle-orm), or [TypeORM](/prisma-postgres/quickstart/typeorm), the Prisma Postgres quickstarts cover those tools.
 
-</details>
+</ModalRow>
 
 </SectionRow>
 

apps/docs/src/components/getting-started.tsx

@@ -188,6 +188,85 @@ export function AgentPrompt({
   );
 }
 
+/**
+ * A row that opens arbitrary content in a modal instead of expanding inline,
+ * so revealing it never shifts the layout below. The content stays mounted
+ * inside the (closed) dialog, so it remains in the served HTML for crawlers
+ * and in the generated .md / llms output.
+ */
+export function ModalRow({
+  title,
+  description,
+  modalTitle,
+  icon,
+  children,
+}: {
+  title: string;
+  description?: string;
+  modalTitle?: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  return (
+    <div className="not-prose my-4 rounded-xl border bg-fd-card">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3">
+        <span
+          className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-fd-background text-fd-primary [&_svg]:size-4"
+          aria-hidden="true"
+        >
+          {icon ?? <Sparkles />}
+        </span>
+        <span className="min-w-0 grow">
+          <span className="block text-sm font-medium">{title}</span>
+          {description && (
+            <span className="block text-xs text-fd-muted-foreground">{description}</span>
+          )}
+        </span>
+        <button
+          className={cn(buttonVariants({ color: "secondary", size: "sm", className: "gap-2" }))}
+          onClick={() => setOpen(true)}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+        >
+          <ChevronDown className="size-3.5" aria-hidden="true" />
+          View
+        </button>
+      </div>
+      <dialog
+        ref={dialogRef}
+        onClose={() => setOpen(false)}
+        onClick={(e) => {
+          if (e.target === dialogRef.current) setOpen(false);
+        }}
+        className="m-auto w-[min(48rem,calc(100vw-2rem))] rounded-xl border bg-fd-card p-0 text-fd-foreground shadow-xl backdrop:bg-black/50"
+      >
+        <div className="flex items-center gap-3 border-b px-4 py-3">
+          <span className="grow text-sm font-medium">{modalTitle ?? title}</span>
+          <button
+            aria-label="Close"
+            onClick={() => setOpen(false)}
+            className="inline-flex items-center rounded-lg p-1.5 text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
+          >
+            <X className="size-4" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto px-4 py-2 text-sm leading-6 text-fd-foreground/80 [&>p]:my-3 [&>p_a]:font-medium [&>p_a]:text-fd-primary [&>p_a]:underline [&>p_a]:decoration-fd-primary/40 [&>p_a]:underline-offset-4 hover:[&>p_a]:decoration-fd-primary">
+          {children}
+        </div>
+      </dialog>
+    </div>
+  );
+}
+
 /**
  * Compact launcher row for the condensed journey: a button opens a modal with
  * AI Prompt and CLI tabs, and a copy action grabs the prompt without opening

apps/docs/src/lib/llm-markdown.ts

@@ -659,6 +659,18 @@ export function normalizeProcessedMarkdown(
       (_match, attrs: string, content: string) => formatHeroPitch(attrs, content),
     )
     .replace(/<\/?HeroGrid[^>]*>/g, "")
+    .replace(
+      // Same brace-tolerant attrs matcher as AgentPrompt: ModalRow takes
+      // JSX-element props like icon={<FolderPlus />}. The row's modal content
+      // collapses to a bold title line plus the body, like <details> does.
+      /<ModalRow\b((?:[^>"'{]|"[^"]*"|'[^']*'|\{[^{}]*\})*)>([\s\S]*?)<\/ModalRow>/g,
+      (_match, attrs: string, content: string) => {
+        const title = getAttribute(attrs, "title");
+        const body = trimComponentContent(content);
+        if (!body) return title ? `**${title}**` : "";
+        return title ? `**${title}**\n\n${body}` : body;
+      },
+    )
     .replace(/<details\b[^>]*>([\s\S]*?)<\/details>/g, (_match, content: string) =>
       formatDetails(content),
     );

apps/docs/src/mdx-components.tsx

@@ -9,6 +9,7 @@ import {
   HeroPitch,
   IconGrid,
   IconLink,
+  ModalRow,
   SectionRow,
   StackDiagram,
   StackLayer,
@@ -125,6 +126,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     HeroPitch,
     IconGrid,
     IconLink,
+    ModalRow,
     SectionRow,
     StackDiagram,
     StackLayer,