From 43a4b815e8990bcf413613a8ebf0c2d88d81c74b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Dec 2023 17:07:16 +1100
Subject: [PATCH] fix(ui): fix InvSlider vertical thumb styling

---
 .../web/src/common/components/InvSlider/theme.ts  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/InvSlider/theme.ts b/invokeai/frontend/web/src/common/components/InvSlider/theme.ts
index 720ab7eafa..383aca32fd 100644
--- a/invokeai/frontend/web/src/common/components/InvSlider/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvSlider/theme.ts
@@ -20,7 +20,8 @@ const filledTrack = defineStyle((_props) => {
   };
 });
 
-const thumb = defineStyle(() => {
+const thumb = defineStyle((props) => {
+  const { orientation } = props;
   return {
     w: 4,
     h: 4,
@@ -29,10 +30,16 @@ const thumb = defineStyle(() => {
     borderColor: 'base.200',
     borderWidth: 2,
     _hover: {
-      transform: `translateY(-50%) scale(1.15)`,
+      transform:
+        orientation === 'vertical'
+          ? 'translateX(-50%) scale(1.15)'
+          : 'translateY(-50%) scale(1.15)',
       transition: 'transform 0.1s',
       _active: {
-        transform: `translateY(-50%) scale(1.22)`,
+        transform:
+          orientation === 'vertical'
+            ? 'translateX(-50%) scale(1.22)'
+            : 'translateY(-50%) scale(1.22)',
         transition: 'transform 0.05s',
       },
     },
@@ -51,7 +58,7 @@ const baseStyle = definePartsStyle((props) => ({
   container: container(),
   track: track(),
   filledTrack: filledTrack(props),
-  thumb: thumb(),
+  thumb: thumb(props),
   mark: mark(),
 }));