Floating scrollbar that doesn’t break layout #236
Description
User Story:
As a user,
I want the scrollbar to float above the content rather than taking up space in the layout,
So that it doesn’t cause UI elements to shift or jump when it appears or disappears,
And so that areas like the sidebar chat history remain visually stable and uncluttered.
Details & Examples:
- The current default scrollbar often pushes content or causes layout shifts when it appears, which breaks the UI and disrupts the user experience.
- For example, in the sidebar where there’s a chat history list, I don’t want the scrollbar to take up space or push the chat items around. Instead, it should hover over the content, just like the MacOS floating scrollbar.
- When the scrollbar isn’t needed (i.e., when not scrolling or when content fits), it should disappear completely, mimicking the MacOS behaviour.
- The visual style of the scrollbar should closely match the MacOS floating scrollbar: thin, rounded, and subtle.
Acceptance Criteria:
- The scrollbar floats above content and does not affect layout or cause content jumps.
- The scrollbar is hidden by default and only appears when scrolling.
- The scrollbar visually matches the MacOS floating scrollbar (thin, rounded, subtle).
- The experience is consistent across MacOS, Windows, Linux, and Android devices.
- The sidebar chat history list and similar areas remain visually stable, with no shifting or resizing when the scrollbar appears/disappears.
Testing Notes:
- Test on Windows, Linux, and Android
- Pay special attention to the sidebar chat history and other scrollable areas to ensure no layout shifts occur.