From da2943d4b67cd4ca10e85a55d365620d3008b258 Mon Sep 17 00:00:00 2001
From: MrSibe <mrsibe@qq.com>
Date: Wed, 30 Sep 2026 16:00:41 +0800
Subject: [PATCH] fix(ui): theme the ScrollArea scrollbar to match the app

---
 DESIGN.md                                      |  8 ++++++++
 src/renderer/src/components/ui/scroll-area.tsx | 10 +++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 069f880..d8066c1 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -800,6 +800,14 @@ second outline to a rail that already sits in the gutter.
 </div>
 ```
 
+There are two scroll controls and they must look like one. `themed-scrollbar` is
+the native-scrolling variant above; a Radix `ScrollArea`
+(`components/ui/scroll-area.tsx`) draws its own bar instead, because a surface
+that needs to read or set scroll position (the chat transcript) cannot use a
+plain overflow container. The primitive's bar is deliberately the same control:
+8px track, a 4px `--muted-foreground` pill that darkens to `--foreground` on
+hover. Change them together, never one without the other.
+
 ### Panel header
 
 Implementation: `components/ui/panel-header.tsx`.
diff --git a/src/renderer/src/components/ui/scroll-area.tsx b/src/renderer/src/components/ui/scroll-area.tsx
index 9c3c332..b1d4152 100644
--- a/src/renderer/src/components/ui/scroll-area.tsx
+++ b/src/renderer/src/components/ui/scroll-area.tsx
@@ -38,13 +38,17 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      // 8px track and a 4px painted pill, the same geometry `.themed-scrollbar`
+      // draws with `border: 2px solid transparent; background-clip: content-box`.
+      // The two scroll surfaces must not drift: a Radix `ScrollArea` and an
+      // `overflow-y-auto themed-scrollbar` are the same control to the reader.
+      orientation === 'vertical' && 'h-full w-2',
+      orientation === 'horizontal' && 'h-2 flex-col',
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full border-2 border-transparent bg-clip-content bg-muted-foreground hover:bg-foreground" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName