Hello,
I would like to make a suggestion as I’m having difficulties using ChatGPT normally. I often have to scroll through ChatGPT responses, and the vertical scroll bar is so narrow and so similar in color to the background that it is very difficult to get it right the first time, which makes me unable to work smoothly (I don’t want to imagine what it will be like for visually impaired people). So my suggestion is to create a more accessible scroll bar.
Thanks and best regards.
This is a OS control issue, related to the setting “automatically hide scroll bars”. A new terrible style put forth by Microsoft for a slim scroll bar.
There’s various tools or methods for setting the control further in the OS or advanced overriding methods in the browser.
It can’t be a Windows issue, because when I navigate or use other web apps scroll bar has a normal width.
Firefox:
Windows:
Showing that it is all about settings external to ChatGPT, spot the scroll bar:
in FireFox about:config.
widget.non-native-theme.scrollbar.style = 1
widget.non-native-theme.scrollbar.style = 5
I’m not talking about the setting “automatically hide scroll bars”, I’m talking about scroll bar width. And no, it’s not all about settings external to ChatGPT. Each OS has their own styles for default scrollbar, but the width can be set by the front-end design, specifically with the property ::-webkit-scrollbar.
Anyway, it was just a suggestion, if you think current desing is ok and people should adapt, there’s no need to argue 
There’s no scrollbar control done in CSS. Just some non-effective Tailwind. As someone that can CSS.
At best, some flexboxes overflow into scroll-land on some platforms. Or breaking things by user-agent:
But yes, the whole Win11 UI (and those that led or would follow), including the slivers of scrollbars uninformed that we’re not navigating the UI by pure thought: stupid.
I have another information @_j .
It’s a design decision from OpenAI, and it is directly inside the code. I have similar problems like @johnny3 and this is not optimal accessible with a bad UX and Usability, combined with a bad contrast ration.
User experience (UX) and usability should take precedence over purely aesthetic considerations. It comes directly from CSS with the WebKit rule, and you can manipulate it directly, if you deactivate this rule, a normal width is there.
And this is not a “windows” or “browser” option. In the same browser, all other tabs have normal scroll bar width.
Added this code into Stylish Chrome extension to get past this unbelievably poor design decision. Thanks for taking the time to look into the code of the page when I couldn’t be bothered!
/* Width of the entire scrollbar /
::-webkit-scrollbar {
width: 16px; / Adjust the width as needed /
height: 16px; / Adjust the height for horizontal scrollbar */
}
/* Background of the scrollbar /
::-webkit-scrollbar-track {
background: #f1f1f1; / Adjust the background color as needed */
}
/* Handle of the scrollbar /
::-webkit-scrollbar-thumb {
background: #888; / Adjust the handle color as needed /
border-radius: 8px; / Optional: for rounded corners */
}
/* Handle on hover /
::-webkit-scrollbar-thumb:hover {
background: #555; / Adjust the hover color as needed */
}
