From 785e07950018c648d28228b334ae25d945d1c5c0 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 15 Sep 2026 12:32:12 +1000
Subject: [PATCH] stabilise theme slider layout

---
 .../interfaces/Account/Preferences/ThemeColorSettings.tsx   | 6 +++---
 packages/ui/src/components/shadcn/ui/slider.tsx             | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx
index 9d66ef8ec92..1cf8fe759c5 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ThemeColorSettings.tsx
@@ -63,8 +63,8 @@ export const ThemeColorSettings = () => {
 
           return (
             <div key={knob.key} className="flex flex-col gap-2">
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex flex-col gap-1">
+              <div className="grid grid-cols-[minmax(0,1fr)_2rem] items-start gap-4">
+                <div className="min-w-0 flex flex-col gap-1">
                   <span
                     id={`theme-color-${knob.key}-label`}
                     className="text-sm font-medium text-foreground"
@@ -73,7 +73,7 @@ export const ThemeColorSettings = () => {
                   </span>
                   <span className="text-sm text-foreground-light">{knob.description}</span>
                 </div>
-                <span className="text-sm font-mono text-foreground-light tabular-nums">
+                <span className="text-right text-sm text-foreground-light tabular-nums">
                   {sliderValue}
                 </span>
               </div>
diff --git a/packages/ui/src/components/shadcn/ui/slider.tsx b/packages/ui/src/components/shadcn/ui/slider.tsx
index 9a3655cfde2..b77470a071a 100644
--- a/packages/ui/src/components/shadcn/ui/slider.tsx
+++ b/packages/ui/src/components/shadcn/ui/slider.tsx
@@ -30,7 +30,7 @@ function Slider({
     >
       <SliderPrimitive.Track
         data-slot="slider-track"
-        className="relative h-1 w-full grow overflow-hidden rounded-full bg-surface-300"
+        className="relative h-1 w-full grow overflow-hidden rounded-full bg-border-strong"
       >
         <SliderPrimitive.Range
           data-slot="slider-range"