From 832007e841dc7baad5fc32f74163f5f46b20db50 Mon Sep 17 00:00:00 2001 From: mlogclub Date: Fri, 19 Jun 2026 13:25:20 +0800 Subject: [PATCH] fix: update scrollbar styles for consistency and improved appearance --- web/styles/main.scss | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/web/styles/main.scss b/web/styles/main.scss index fcd8903..6a8d410 100644 --- a/web/styles/main.scss +++ b/web/styles/main.scss @@ -1,15 +1,15 @@ -// Native thin scrollbar aligned with the widget, used by chat message lists. +// Native scrollbar aligned with the Base UI ScrollArea used by lists. // Imported from app/layout.tsx with the rest of the global styles. -$thumb: #cbd5e1; -$thumb-hover: #94a3b8; +$scrollbar-thumb: var(--border); .agent-desk-scrollbar { scrollbar-width: thin; - scrollbar-color: $thumb transparent; + scrollbar-color: $scrollbar-thumb transparent; &::-webkit-scrollbar { - width: 6px; + width: 10px; + height: 10px; } &::-webkit-scrollbar-track { @@ -17,28 +17,14 @@ $thumb-hover: #94a3b8; } &::-webkit-scrollbar-thumb { - border: 2px solid transparent; + border: 1px solid transparent; border-radius: 999px; - background: $thumb; + background: $scrollbar-thumb; background-clip: padding-box; } &::-webkit-scrollbar-thumb:hover { - background: $thumb-hover; - background-clip: padding-box; - } -} - -.dark .agent-desk-scrollbar { - scrollbar-color: hsl(var(--border)) transparent; - - &::-webkit-scrollbar-thumb { - background: hsl(var(--border)); - background-clip: padding-box; - } - - &::-webkit-scrollbar-thumb:hover { - background: hsl(var(--muted-foreground) / 0.45); + background: $scrollbar-thumb; background-clip: padding-box; } }