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;