From cecfa3e01019f307a5fa230e3a7c06255b166d7b Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Thu, 12 Feb 2026 18:05:15 +0000
Subject: [PATCH] style: custom webkit scrollbar styling for macOS/Chrome

Add ::-webkit-scrollbar rules matching the dark theme. Textarea gets
an even thinner 4px scrollbar. Fixes ugly default scrollbar on macOS.

Closes feedback #36.
---
 FEEDBACK.md   | 12 ++++++++++++
 src/index.css | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/FEEDBACK.md b/FEEDBACK.md
index 2bf343a..289f1e9 100644
--- a/FEEDBACK.md
+++ b/FEEDBACK.md
@@ -362,3 +362,15 @@
   - Check if autoFormatText() is interfering with markdown syntax
   - Verify that streaming → final transition properly re-renders with markdown
   - Test with a long multi-section response to reproduce
+
+## Item #36
+- **Date:** 2026-02-12
+- **Priority:** medium
+- **Status:** in-progress
+- **Description:** Prettier scrollbar in the text input field (ChatInput textarea)
+- **Details:**
+  - On macOS the default scrollbar in the textarea looks ugly
+  - Style it with custom CSS (thin, dark theme matching the UI — similar to the chat scroll area)
+  - Use webkit-scrollbar styles + scrollbar-width/scrollbar-color for Firefox
+  - Keep it subtle: thin track, small thumb with rounded corners, matching the zinc/cyan theme
+  - Reported by Josh (external user on macOS)
diff --git a/src/index.css b/src/index.css
index 02f12a7..6a91be1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,6 +6,39 @@
   scrollbar-color: #52525b #27272a;
 }
 
+/* WebKit scrollbar styling (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #52525b;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #71717a;
+}
+
+/* Textarea-specific: even thinner scrollbar */
+textarea::-webkit-scrollbar {
+  width: 4px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background: #3f3f46;
+  border-radius: 2px;
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background: #52525b;
+}
+
 html, body {
   margin: 0;
   background: #1e1e24;