From 022a5f7b9a93ae949c91d491d11b22a56488d546 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Tue, 9 Dec 2025 10:26:54 -0500
Subject: [PATCH] scales-update

- left/right handles were "overflowing" main rect, dropped rx prop instead use of rounded-l and rounded-r.
- added slight 2px padding for left/right bound text
fixed "appearance' of assymetric postioning of play/stop icons
---
 .../routes/docs/guides/scales/DomainRangeChart.svelte  |  4 ++--
 .../src/routes/docs/guides/scales/ResizableRect.svelte | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/src/routes/docs/guides/scales/DomainRangeChart.svelte b/docs/src/routes/docs/guides/scales/DomainRangeChart.svelte
index 2483c64b5..771061d62 100644
--- a/docs/src/routes/docs/guides/scales/DomainRangeChart.svelte
+++ b/docs/src/routes/docs/guides/scales/DomainRangeChart.svelte
@@ -76,13 +76,13 @@
 			icon={LucidePlay}
 			on:click={() => (isPlaying = true)}
 			disabled={isPlaying}
-			classes={{ icon: 'text-xs', root: 'px-2 py-1' }}
+			classes={{ icon: 'text-xs', root: 'pl-2 pr-1 py-1' }}
 		/>
 		<Button
 			icon={LucideSquare}
 			on:click={() => (isPlaying = false)}
 			disabled={!isPlaying}
-			classes={{ icon: 'text-xs', root: 'px-2 py-1' }}
+			classes={{ icon: 'text-xs', root: 'pl-1 pr-2 py-1' }}
 		/>
 	</ButtonGroup>
 </div>
diff --git a/docs/src/routes/docs/guides/scales/ResizableRect.svelte b/docs/src/routes/docs/guides/scales/ResizableRect.svelte
index 29c921406..7253f3ee6 100644
--- a/docs/src/routes/docs/guides/scales/ResizableRect.svelte
+++ b/docs/src/routes/docs/guides/scales/ResizableRect.svelte
@@ -72,8 +72,7 @@
 	{y}
 	width={handleWidth}
 	height={rectHeight}
-	rx={2}
-	class="bg-primary/20 hover:bg-primary/30 cursor-ew-resize flex items-center justify-center pl-0.5"
+	class="bg-primary/20 hover:bg-primary/30 cursor-ew-resize flex items-center justify-center pl-0.5 rounded-l-lg"
 	onpointerenter={() => {
 		isHovering = true;
 	}}
@@ -100,8 +99,7 @@
 	{y}
 	width={handleWidth}
 	height={rectHeight}
-	rx={2}
-	class="bg-primary/20 hover:bg-primary/30 cursor-ew-resize flex items-center justify-center pr-0.5"
+	class="bg-primary/20 hover:bg-primary/30 cursor-ew-resize flex items-center justify-center pr-0.5 rounded-r-lg"
 	onpointerenter={() => {
 		isHovering = true;
 	}}
@@ -130,7 +128,7 @@
 	y={y + rectHeight / 2}
 	textAnchor="start"
 	verticalAnchor="middle"
-	class="text-sm text-primary pointer-events-none"
+	class="text-sm text-primary pointer-events-none pl-[2px]"
 />
 
 <!-- Label text -->
@@ -162,5 +160,5 @@
 	y={y + rectHeight / 2}
 	textAnchor="end"
 	verticalAnchor="middle"
-	class="text-sm text-primary pointer-events-none"
+	class="text-sm text-primary pointer-events-none pr-[2px]"
 />