From 77067a08252ecf3ec9391be4410a3b13b86e549d Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Sat, 15 Aug 2026 19:50:10 +1000
Subject: [PATCH] Give docs examples the same vertical rhythm as other blocks
 (#420)

ExampleFrame opted out of prose with not-prose but had no block margin,
so examples sat flush against neighbouring content. Match fumadocs
CodeBlock/Callout spacing with my-4 on the shared frame.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
---
 apps/docs/src/components/example-block.browser.test.tsx | 8 ++++++++
 apps/docs/src/components/example-block.tsx              | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/docs/src/components/example-block.browser.test.tsx b/apps/docs/src/components/example-block.browser.test.tsx
index 7feb192e..7defb1e4 100644
--- a/apps/docs/src/components/example-block.browser.test.tsx
+++ b/apps/docs/src/components/example-block.browser.test.tsx
@@ -34,6 +34,14 @@ test('shows a named loading state in a frame that reserves the preview space', (
 	expect(playgroundPlaceholder.closest<HTMLElement>('[inert]')?.inert).toBe(true);
 });
 
+test('keeps docs block spacing on the example frame', () => {
+	renderExample(exampleTitle);
+
+	const frameStyles = getComputedStyle(page.getByRole('region', { name: loadingLabel }).element());
+	expect(frameStyles.marginTop).toBe('16px');
+	expect(frameStyles.marginBottom).toBe('16px');
+});
+
 function renderExample(title: string) {
 	container = document.body.appendChild(document.createElement('div'));
 	container.className = `luke-ui-theme ${tactileThemeClassName}`;
diff --git a/apps/docs/src/components/example-block.tsx b/apps/docs/src/components/example-block.tsx
index 0114296b..acad5534 100644
--- a/apps/docs/src/components/example-block.tsx
+++ b/apps/docs/src/components/example-block.tsx
@@ -134,7 +134,7 @@ function ExampleFrame({ actions, ariaLabel, children, title }: ExampleFrameProps
 	return (
 		<Box
 			aria-label={ariaLabel}
-			className="not-prose overflow-hidden rounded-lg border border-fd-border"
+			className="not-prose my-4 overflow-hidden rounded-lg border border-fd-border"
 			role={ariaLabel ? 'region' : undefined}
 		>
 			<Box className="flex items-center justify-between gap-2 border-fd-border border-b bg-fd-card px-4 py-2">
-- 
2.51.2