shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide horizontal scrollbar on textarea for Windows compatibility

Browse Source 
Add overflow-x: hidden and word-break styles to textarea to prevent
ugly horizontal scrollbar on Windows. Also hide the horizontal webkit
scrollbar track entirely.
This commit is contained in:
Nicolas Varrot
2026-02-12 18:15:08 +00:00
parent cecfa3e010
commit ad7d149f88
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
FEEDBACK.md
View File

@@ -366,7 +366,8 @@
## Item #36 ## Item #36
- **Date:** 2026-02-12 - **Date:** 2026-02-12
- **Priority:** medium - **Priority:** medium
- **Status:** in-progress - **Status:** done
- **Completed:** 2026-02-12 — commit `cecfa3e`
- **Description:** Prettier scrollbar in the text input field (ChatInput textarea) - **Description:** Prettier scrollbar in the text input field (ChatInput textarea)
- **Details:** - **Details:**
- On macOS the default scrollbar in the textarea looks ugly - On macOS the default scrollbar in the textarea looks ugly
@@ -374,3 +375,16 @@
- Use webkit-scrollbar styles + scrollbar-width/scrollbar-color for Firefox - 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 - Keep it subtle: thin track, small thumb with rounded corners, matching the zinc/cyan theme
- Reported by Josh (external user on macOS) - Reported by Josh (external user on macOS)
## Item #37
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** pending
- **Description:** Scrollbar in textarea still ugly on Windows (horizontal scrollbar)
- **Details:**
- Josh reports the textarea horizontal scrollbar is still ugly/beige on Windows even after v1.11.0
- The webkit scrollbar fix from #36 may not apply to the textarea horizontal scrollbar
- Screenshot shows a small beige/gold horizontal scrollbar at the bottom of the input area
- May need to also hide the horizontal scrollbar entirely (textarea shouldn't need horizontal scroll — use word-wrap/overflow-wrap instead)
- Add `overflow-x: hidden` on the textarea to prevent horizontal scrollbar entirely
- Also check that `resize: none` is set and `word-break: break-word` / `overflow-wrap: break-word` to avoid horizontal overflow

13
src/index.css
View File

@@ -25,9 +25,14 @@
background: #71717a; background: #71717a;
} }
/* Textarea-specific: even thinner scrollbar */ /* Textarea-specific: even thinner scrollbar, no horizontal scroll */
textarea::-webkit-scrollbar { textarea::-webkit-scrollbar {
width: 4px; width: 4px;
height: 0;
}
textarea::-webkit-scrollbar:horizontal {
display: none;
} }
textarea::-webkit-scrollbar-thumb { textarea::-webkit-scrollbar-thumb {
@@ -39,6 +44,12 @@ textarea::-webkit-scrollbar-thumb:hover {
background: #52525b; background: #52525b;
} }
textarea {
overflow-x: hidden;
overflow-wrap: break-word;
word-break: break-word;
}
html, body { html, body {
margin: 0; margin: 0;
background: #1e1e24; background: #1e1e24;