From 2990c21d9749f74fd4715cf2c219a7c7283b574d Mon Sep 17 00:00:00 2001
From: Mislav Lukach <mislavlukach@gmail.com>
Date: Thu, 3 Jul 2025 19:21:18 +0200
Subject: [PATCH] fix(ui): fix base components styling (#9528)

---
 openhands-ui/components/button/utils.ts       | 21 ++-----------------
 .../components/scrollable/Scrollable.tsx      |  4 ++--
 openhands-ui/components/toggle/Toggle.tsx     |  2 +-
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/openhands-ui/components/button/utils.ts b/openhands-ui/components/button/utils.ts
index 0fca6f6c01..63b246e4da 100644
--- a/openhands-ui/components/button/utils.ts
+++ b/openhands-ui/components/button/utils.ts
@@ -21,13 +21,7 @@ export const buttonStyles: Record<ComponentVariant, ButtonStyle> = {
       "disabled:opacity-50",
     ]),
     icon: cn(["text-primary-500"]),
-    text: cn([
-      "text-primary-500",
-      // hover modifier
-      "group-enabled:group-hover:font-semibold",
-      // focus modifier
-      "group-enabled:group-focus:font-semibold",
-    ]),
+    text: cn(["text-primary-500"]),
   },
   secondary: {
     button: cn([
@@ -42,13 +36,7 @@ export const buttonStyles: Record<ComponentVariant, ButtonStyle> = {
       "disabled:opacity-50",
     ]),
     icon: cn(["text-light-neutral-300"]),
-    text: cn([
-      "text-light-neutral-300",
-      // hover modifier
-      "group-enabled:group-hover:font-semibold",
-      // focus modifier
-      "group-enabled:group-focus:font-semibold",
-    ]),
+    text: cn(["text-light-neutral-300"]),
   },
   tertiary: {
     button: cn([
@@ -65,11 +53,6 @@ export const buttonStyles: Record<ComponentVariant, ButtonStyle> = {
     icon: cn(["text-primary-500"]),
     text: cn([
       "text-primary-500 underline",
-      // hover modifier
-      "group-enabled:group-hover:font-semibold",
-      // focus modifier
-      "group-enabled:group-focus:font-semibold",
-
       // disabled modifier
       "group-disabled:no-underline",
     ]),
diff --git a/openhands-ui/components/scrollable/Scrollable.tsx b/openhands-ui/components/scrollable/Scrollable.tsx
index a707d9e174..0f7a167ee4 100644
--- a/openhands-ui/components/scrollable/Scrollable.tsx
+++ b/openhands-ui/components/scrollable/Scrollable.tsx
@@ -38,8 +38,8 @@ export const Scrollable = ({
       tabIndex={tabIndex ?? 0}
       {...props}
       className={cn(
-        "scrollbar-thin scrollbar-thumb-light-neutral-700 scrollbar-track-grey-985",
-        "scrollbar-thumb-rounded-md scrollbar-track-rounded-md",
+        "scrollbar-thin scrollbar-thumb-light-neutral-700",
+        "scrollbar-thumb-rounded-md scrollbar-track-transparent",
         style,
         className
       )}
diff --git a/openhands-ui/components/toggle/Toggle.tsx b/openhands-ui/components/toggle/Toggle.tsx
index 1959d4fcb4..a6d52dc26f 100644
--- a/openhands-ui/components/toggle/Toggle.tsx
+++ b/openhands-ui/components/toggle/Toggle.tsx
@@ -67,7 +67,7 @@ export const Toggle = ({
         <div
           className={cn(
             "rounded-full",
-            "absolute top-0.75 left-0.75 w-5 h-5 ",
+            "absolute top-1 left-1 w-4.5 h-4.5",
             "transition duration-300 ease-in-out",
             // base
             "bg-light-neutral-500 scale-100",