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.
This commit is contained in:
12
FEEDBACK.md
12
FEEDBACK.md
@@ -362,3 +362,15 @@
|
|||||||
- Check if autoFormatText() is interfering with markdown syntax
|
- Check if autoFormatText() is interfering with markdown syntax
|
||||||
- Verify that streaming → final transition properly re-renders with markdown
|
- Verify that streaming → final transition properly re-renders with markdown
|
||||||
- Test with a long multi-section response to reproduce
|
- 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)
|
||||||
|
|||||||
@@ -6,6 +6,39 @@
|
|||||||
scrollbar-color: #52525b #27272a;
|
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 {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #1e1e24;
|
background: #1e1e24;
|
||||||
|
|||||||
Reference in New Issue
Block a user