From 0fd3ab008f46af2b9646c2db749c441c00d75b15 Mon Sep 17 00:00:00 2001
From: Anton <antonhorn@icloud.com>
Date: Sun, 5 Jul 2026 16:25:59 +0200
Subject: [PATCH] feat(web): slim, theme-aware scrollbar for chat transcript

Apply the same slim, fade-in-on-hover scrollbar used by the sidebar to the
chat message transcript. Adds a stable .chat-scroll class to the
use-stick-to-bottom scroll element and shares the scrollbar styling via a
--scrollbar-tint token (--foreground for chat, --sidebar-foreground for the
sidebar).
---
 web/src/components/chat-ui/Conversation.tsx |  2 +-
 web/src/index.css                           | 37 +++++++++++++++------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/web/src/components/chat-ui/Conversation.tsx b/web/src/components/chat-ui/Conversation.tsx
index 368fd63..fa1356b 100644
--- a/web/src/components/chat-ui/Conversation.tsx
+++ b/web/src/components/chat-ui/Conversation.tsx
@@ -20,7 +20,7 @@ export const ConversationContent = ({
 }: ComponentProps<typeof StickToBottom.Content>) => (
   <StickToBottom.Content
     className={cn("flex min-w-0 flex-col gap-4 p-4", className)}
-    scrollClassName="min-w-0"
+    scrollClassName="min-w-0 chat-scroll"
     {...props}
   />
 );
diff --git a/web/src/index.css b/web/src/index.css
index 06d13bb..3d6cb4e 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -226,24 +226,36 @@
   display: none;
 }
 
-/* ── Slim, unobtrusive scrollbar for the project sidebar ── */
+/* ── Slim, unobtrusive scrollbars (sidebar + chat transcript) ── */
 [data-slot="sidebar-content"] {
+  --scrollbar-tint: var(--sidebar-foreground);
+}
+.chat-scroll {
+  --scrollbar-tint: var(--foreground);
+}
+[data-slot="sidebar-content"],
+.chat-scroll {
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
   transition: scrollbar-color 0.2s ease;
 }
 [data-slot="sidebar-content"]:hover,
-[data-slot="sidebar-content"]:focus-within {
-  scrollbar-color: color-mix(in srgb, var(--sidebar-foreground) 22%, transparent)
+[data-slot="sidebar-content"]:focus-within,
+.chat-scroll:hover,
+.chat-scroll:focus-within {
+  scrollbar-color: color-mix(in srgb, var(--scrollbar-tint) 22%, transparent)
     transparent;
 }
-[data-slot="sidebar-content"]::-webkit-scrollbar {
+[data-slot="sidebar-content"]::-webkit-scrollbar,
+.chat-scroll::-webkit-scrollbar {
   width: 10px;
 }
-[data-slot="sidebar-content"]::-webkit-scrollbar-track {
+[data-slot="sidebar-content"]::-webkit-scrollbar-track,
+.chat-scroll::-webkit-scrollbar-track {
   background: transparent;
 }
-[data-slot="sidebar-content"]::-webkit-scrollbar-thumb {
+[data-slot="sidebar-content"]::-webkit-scrollbar-thumb,
+.chat-scroll::-webkit-scrollbar-thumb {
   background-color: transparent;
   border: 3px solid transparent;
   border-radius: 9999px;
@@ -251,11 +263,14 @@
   transition: background-color 0.2s ease;
 }
 [data-slot="sidebar-content"]:hover::-webkit-scrollbar-thumb,
-[data-slot="sidebar-content"]:focus-within::-webkit-scrollbar-thumb {
-  background-color: color-mix(in srgb, var(--sidebar-foreground) 22%, transparent);
-}
-[data-slot="sidebar-content"]::-webkit-scrollbar-thumb:hover {
-  background-color: color-mix(in srgb, var(--sidebar-foreground) 38%, transparent);
+[data-slot="sidebar-content"]:focus-within::-webkit-scrollbar-thumb,
+.chat-scroll:hover::-webkit-scrollbar-thumb,
+.chat-scroll:focus-within::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--scrollbar-tint) 22%, transparent);
+}
+[data-slot="sidebar-content"]::-webkit-scrollbar-thumb:hover,
+.chat-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--scrollbar-tint) 38%, transparent);
 }
 
 .scroll-shadow {