Merge pull request #23 from fancyboi999/fix/right-sidebar-scrollbar-track

fix: soften message scrollbars

Author: idoubi

src/app/pages/TaskDetail.tsx

@@ -933,7 +933,7 @@ function TaskDetailContent() {
             <div
               ref={messagesContainerRef}
               className={cn(
-                'relative flex-1 overflow-x-hidden overflow-y-auto',
+                'scrollbar-soft relative flex-1 overflow-x-hidden overflow-y-auto',
                 !isPreviewVisible &&
                   !isRightSidebarVisible &&
                   'flex justify-center'

src/components/task/RightSidebar.tsx

@@ -1224,7 +1224,7 @@ export function RightSidebar({
   };
 
   return (
-    <div className="bg-background flex h-full flex-col overflow-x-hidden overflow-y-auto">
+    <div className="scrollbar-blend bg-background flex h-full flex-col overflow-x-hidden overflow-y-auto">
       {/* 1. Workspace Section */}
       <CollapsibleSection
         title={t.task.workspace || 'Workspace'}

src/config/style/global.css

@@ -30,6 +30,37 @@
   scrollbar-width: none; /* Firefox */
 }
 
+/* Blend scrollbars into background (transparent track) */
+.scrollbar-blend {
+  scrollbar-color: var(--muted-foreground) transparent; /* Firefox */
+}
+.scrollbar-blend::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Soft, light scrollbars (transparent track + subtle thumb) */
+.scrollbar-soft {
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent; /* Firefox */
+}
+.dark .scrollbar-soft {
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent; /* Firefox */
+}
+.scrollbar-soft::-webkit-scrollbar {
+  width: 8px;
+}
+.scrollbar-soft::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-soft::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+.dark .scrollbar-soft::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 input,
 select,
 textarea {