From d7f5e3121c5032a000c94cd596b08175d72cb91d Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 14 Dec 2025 13:24:45 -0500
Subject: [PATCH] lineargradient-horiz-scrollbars

Linear gradient examples with lot of bars (tailwind-colors and units) commonly get clipped horizontally on narrower screens or with expanded sidepanel. This adds horizontal scrollbars when needed.
---
 .../LinearGradient/tailwind-colors.svelte     | 116 +++++++++---------
 .../components/LinearGradient/units.svelte    |  38 +++---
 2 files changed, 79 insertions(+), 75 deletions(-)

diff --git a/docs/src/examples/components/LinearGradient/tailwind-colors.svelte b/docs/src/examples/components/LinearGradient/tailwind-colors.svelte
index f2103594d..11b5141c3 100644
--- a/docs/src/examples/components/LinearGradient/tailwind-colors.svelte
+++ b/docs/src/examples/components/LinearGradient/tailwind-colors.svelte
@@ -2,60 +2,62 @@
 	import { Chart, Layer, LinearGradient, Rect } from 'layerchart';
 </script>
 
-<Chart height={300}>
-	<Layer>
-		<LinearGradient class="from-pink-500 to-yellow-500" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-green-300 to-purple-600" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-gray-600 to-black" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-pink-300 to-indigo-400" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-yellow-100 to-yellow-500" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-blue-700 to-gray-900" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 5} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-sky-300 to-blue-500" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 6} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-red-500 to-red-800" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 7} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-
-		<LinearGradient class="from-blue-400 to-emerald-400" vertical>
-			{#snippet children({ gradient })}
-				<Rect x={120 * 8} y={0} width={100} height={300} rx={8} fill={gradient} />
-			{/snippet}
-		</LinearGradient>
-	</Layer>
-</Chart>
+<div class="overflow-x-auto max-w-full">
+	<Chart height={320} width={1065}>
+		<Layer>
+			<LinearGradient class="from-pink-500 to-yellow-500" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-green-300 to-purple-600" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-gray-600 to-black" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-pink-300 to-indigo-400" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-yellow-100 to-yellow-500" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-blue-700 to-gray-900" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 5} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-sky-300 to-blue-500" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 6} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-red-500 to-red-800" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 7} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient class="from-blue-400 to-emerald-400" vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 8} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+		</Layer>
+	</Chart>
+</div>
diff --git a/docs/src/examples/components/LinearGradient/units.svelte b/docs/src/examples/components/LinearGradient/units.svelte
index bef6ab9bd..9ffe8097f 100644
--- a/docs/src/examples/components/LinearGradient/units.svelte
+++ b/docs/src/examples/components/LinearGradient/units.svelte
@@ -2,22 +2,24 @@
 	import { Chart, Layer, LinearGradient, Rect } from 'layerchart';
 </script>
 
-<Chart height={300}>
-	<Layer>
-		<LinearGradient class="from-green-500 to-blue-500" units="objectBoundingBox">
-			{#snippet children({ gradient })}
-				{#each { length: 6 } as _, i}
-					<Rect x={0 + i * 120} y={0} width={100} height={140} rx={8} fill={gradient} />
-				{/each}
-			{/snippet}
-		</LinearGradient>
+<div class="overflow-x-auto max-w-full">
+	<Chart height={320} width={700}>
+		<Layer>
+			<LinearGradient class="from-green-500 to-blue-500" units="objectBoundingBox">
+				{#snippet children({ gradient })}
+					{#each { length: 6 } as _, i}
+						<Rect x={0 + i * 120} y={0} width={100} height={140} rx={8} fill={gradient} />
+					{/each}
+				{/snippet}
+			</LinearGradient>
 
-		<LinearGradient class="from-green-500 to-blue-500" units="userSpaceOnUse">
-			{#snippet children({ gradient })}
-				{#each { length: 6 } as _, i}
-					<Rect x={0 + i * 120} y={160} width={100} height={140} rx={8} fill={gradient} />
-				{/each}
-			{/snippet}
-		</LinearGradient>
-	</Layer>
-</Chart>
+			<LinearGradient class="from-green-500 to-blue-500" units="userSpaceOnUse">
+				{#snippet children({ gradient })}
+					{#each { length: 6 } as _, i}
+						<Rect x={0 + i * 120} y={160} width={100} height={140} rx={8} fill={gradient} />
+					{/each}
+				{/snippet}
+			</LinearGradient>
+		</Layer>
+	</Chart>
+</div>