From e5f12b425254b79d8428db92d266952857ca74cb Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Thu, 20 Aug 2026 08:09:20 -0600
Subject: [PATCH] fix(docs): fix step code block spacing and Prisma guide tabs
 (#49263)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two fixes for the [Prisma
guide](https://supabase.com/docs/guides/database/prisma):

- `StepHikeCompact.Code` marked its whole subtree `not-prose`, so the
labels and admonitions that steps interleave with their code samples
rendered at 16px with zero margins, flush against the samples and tab
bars. Dropping `not-prose` restores body typography and spacing;
back-to-back samples now get a gap too, since they have no prose between
them.
- The guide's three outer tab groups omitted `type`, so they fell back
to pill styling — the only pills among 395 `<Tabs>` in the content tree.

Fixes DOCS-1327

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

## Summary by CodeRabbit

* **Style**
* Improved spacing and prose behavior for code samples in the
documentation.
  * Preserved existing code margin customizations.
* Updated Prisma guide tabs with a consistent compact, underlined
appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/components/StepHikeCompact/index.tsx | 10 +++++++++-
 apps/docs/content/guides/database/prisma.mdx   |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/docs/components/StepHikeCompact/index.tsx b/apps/docs/components/StepHikeCompact/index.tsx
index 7d86f47884a..33e15d219cb 100644
--- a/apps/docs/components/StepHikeCompact/index.tsx
+++ b/apps/docs/components/StepHikeCompact/index.tsx
@@ -108,10 +108,18 @@ const Details: FC<PropsWithChildren<IDetails>> = ({ children, title, fullWidth =
 }
 
 const Code: FC<PropsWithChildren<ICode>> = ({ children }) => {
+  // Not `not-prose`: steps interleave labels and admonitions with their code samples, and
+  // stripping prose leaves that text unstyled and flush against the samples.
   return (
     <div
       data-step-hike="code"
-      className="not-prose min-w-0 w-full [&_.shiki]:!my-0 [&_.shiki-wrapper]:!my-0"
+      className={cn(
+        'min-w-0 w-full',
+        // `Step` spaces the block as a whole, so samples don't carry margins of their own...
+        '[&_.shiki]:!my-0 [&_.shiki-wrapper]:!my-0',
+        // ...but back-to-back samples have no prose between them to separate them.
+        '[&_.shiki+.shiki]:!mt-6'
+      )}
     >
       {children}
     </div>
diff --git a/apps/docs/content/guides/database/prisma.mdx b/apps/docs/content/guides/database/prisma.mdx
index 059f603190c..8f913682789 100644
--- a/apps/docs/content/guides/database/prisma.mdx
+++ b/apps/docs/content/guides/database/prisma.mdx
@@ -141,7 +141,7 @@ If you plan to solely use Prisma instead of the Supabase Data API (PostgREST), t
     </StepHikeCompact.Details>
 
     <StepHikeCompact.Code>
-            <Tabs>
+            <Tabs type="underlined" size="small">
                 <TabPanel id="serverful" label="server-based deployments">
                   In your .env file, set the DATABASE_URL variable to your connection string
                     ```text .env
@@ -192,7 +192,7 @@ If you plan to solely use Prisma instead of the Supabase Data API (PostgREST), t
     </StepHikeCompact.Details>
 
     <StepHikeCompact.Code>
-        <Tabs>
+        <Tabs type="underlined" size="small">
             <TabPanel id="serverful" label="server-based deployments">
                 ```ts prisma.config.ts
                 import "dotenv/config";
@@ -240,7 +240,7 @@ If you plan to solely use Prisma instead of the Supabase Data API (PostgREST), t
 
     <StepHikeCompact.Code>
 
-    <Tabs>
+    <Tabs type="underlined" size="small">
 
           <TabPanel id="new-projects" label="New Projects">
             Create new tables in your prisma.schema file