From 17d9ca9640aee9618df722d253fcc56df1d9ab65 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Fri, 1 May 2026 17:20:26 -0400
Subject: [PATCH] fixed-height-md-tabs

Add a height prop to the MDC :::tabs component to prevent layout shifts when switching between tabs with different content lengths.

Usage:
:::tabs{key="framework" height="185px"}
---
 docs/src/lib/markdown/components/Tab.svelte   |  1 +
 docs/src/lib/markdown/components/Tabs.svelte  | 39 ++++++++++++++++++-
 docs/src/lib/markdown/components/pre.svelte   |  2 +-
 docs/src/routes/docs/getting-started/+page.md |  4 +-
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/docs/src/lib/markdown/components/Tab.svelte b/docs/src/lib/markdown/components/Tab.svelte
index 8eec7cf23..226724842 100644
--- a/docs/src/lib/markdown/components/Tab.svelte
+++ b/docs/src/lib/markdown/components/Tab.svelte
@@ -14,6 +14,7 @@
 
 	const tabsContext = getContext<{
 		activeTab: number;
+		hasHeight: boolean;
 		setActiveTab: (index: number) => void;
 		registerTab: (label: string | undefined, icon: Component | undefined) => number;
 	}>('tabs');
diff --git a/docs/src/lib/markdown/components/Tabs.svelte b/docs/src/lib/markdown/components/Tabs.svelte
index 44838dd1b..8e2a8477f 100644
--- a/docs/src/lib/markdown/components/Tabs.svelte
+++ b/docs/src/lib/markdown/components/Tabs.svelte
@@ -23,9 +23,10 @@
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
 		key?: string;
+		height?: string;
 	}
 
-	const { children, key, class: className, ...restProps }: Props = $props();
+	const { children, key, class: className, height, ...restProps }: Props = $props();
 
 	// Use synced state if key is provided, otherwise use local state
 	let localActiveIndex = $state(0);
@@ -56,6 +57,9 @@
 		get activeTab() {
 			return activeTab;
 		},
+		get hasHeight() {
+			return !!height;
+		},
 		setActiveTab: (index: number) => {
 			if (syncedState) {
 				syncedState.activeLabel = tabs[index]?.label ?? null;
@@ -103,7 +107,38 @@
 	</div>
 
 	<!-- Tab content -->
-	<div class="border rounded-lg rounded-tl-none px-3 py-1 bg-surface-100">
+	<div
+		class={cls('border rounded-lg rounded-tl-none px-3 py-1 bg-surface-100', height && 'tabs-has-height overflow-y-scroll')}
+		style:height={height}
+	>
 		{@render children?.()}
 	</div>
 </div>
+
+<style>
+	.tabs-has-height {
+		display: flex;
+		flex-direction: column;
+	}
+	:global(.tabs-has-height .tab:not(.hidden)) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+	/* rehype-pretty-code wraps code blocks in <figure> */
+	:global(.tabs-has-height .tab:not(.hidden) > figure) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+	:global(.tabs-has-height .tab:not(.hidden) .pre-block) {
+		flex: 1;
+		min-height: 0;
+	}
+	:global(.tabs-has-height .tab:not(.hidden) .pre-block > pre) {
+		flex: 1;
+		min-height: 0;
+	}
+</style>
diff --git a/docs/src/lib/markdown/components/pre.svelte b/docs/src/lib/markdown/components/pre.svelte
index 068e6f6b5..17c49dd62 100644
--- a/docs/src/lib/markdown/components/pre.svelte
+++ b/docs/src/lib/markdown/components/pre.svelte
@@ -49,7 +49,7 @@
 </script>
 
 <div
-	class="relative group rounded-lg outline outline-surface-content/20 dark:outline-surface-content/10 overflow-hidden my-2"
+	class="pre-block relative group rounded-lg outline outline-surface-content/20 dark:outline-surface-content/10 overflow-hidden my-2 flex flex-col"
 >
 	{#if dataTitle}
 		<div
diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index b9bf1e2a8..371d96ee1 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -115,7 +115,7 @@ If you wish to apply darkmode defaults, see the [dark mode](/docs/guides/styles#
 
 or with a single `.css` import, Layerchart [provides](https://github.com/techniq/layerchart/tree/next/packages/layerchart/src/lib/styles) theming conventions for many popular UI frameworks.
 
-:::tabs{key="framework"}
+:::tabs{key="framework" height="185px"}
 
     ::tab{label="shadcn-svelte" icon="custom-brands:shadcnsvelte"}
     ```css title="app.css"
@@ -198,7 +198,7 @@ All set! Now just fire up the dev server and start iterating. Have fun!
 
 Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples) are available for popular UI frameworks.
 
-:::tabs{key="framework"}
+:::tabs{key="framework" height="140px"}
 
     ::tab{label="shadcn-svelte" icon="custom-brands:shadcnsvelte"}
     [shadcn-svelte](https://www.shadcn-svelte.com/)