From 32d1361ffa3ea1c89917de9ddd9b30d21f28da42 Mon Sep 17 00:00:00 2001
From: Vishakha Agrawal <119448495+vishakha1411@users.noreply.github.com>
Date: Fri, 9 Jan 2026 17:20:02 +0530
Subject: [PATCH] Modernize Input Field Scrollbar Design (#536) (#538)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modernize Input Field Scrollbar Design #536

* Added Input Field Scrollbar Design #536

* The edit mode for the user scroller already looks good, so there’s no need to change it. The scrollbar-thin class only makes the scrollbar smaller compared to when it’s not present, so it isn’t needed.

---------

Co-authored-by: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
---
 app/globals.css                     | 13 +++++++++++++
 components/chat-input.tsx           |  2 +-
 components/chat-message-display.tsx |  2 +-
 components/history-dialog.tsx       |  2 +-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index d91c503..f475439 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -244,6 +244,19 @@
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.75 0.01 260);
     }
+
+    /* Dark mode scrollbar */
+    .dark .scrollbar-thin {
+        scrollbar-color: oklch(0.35 0.015 260) transparent;
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: oklch(0.35 0.015 260);
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: oklch(0.45 0.015 260);
+    }
 }
 
 /* Smooth page transitions */
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 7524da5..a724ce4 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -407,7 +407,7 @@ export function ChatInput({
                     placeholder={dict.chat.placeholder}
                     disabled={isDisabled}
                     aria-label="Chat input"
-                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
                 />
 
                 <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index 815636f..8366609 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -1114,7 +1114,7 @@ export function ChatMessageDisplay({
                                                                                                         )}
                                                                                                     </button>
                                                                                                     {isExpanded && (
-                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30">
+                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
                                                                                                             <pre className="text-xs whitespace-pre-wrap text-foreground/80">
                                                                                                                 {
                                                                                                                     section.content
diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
index 3ba6068..21675e0 100644
--- a/components/history-dialog.tsx
+++ b/components/history-dialog.tsx
@@ -43,7 +43,7 @@ export function HistoryDialog({
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
                 <DialogHeader>
                     <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>