Ugly sidebar scrollbar on small screens

nienn commented 3 years ago

Problem

On small screens, the scrollbar on the sidebar navigation is shown.

Reproducing the problem

The issue can be reproduced on any small screen, but is best checked on desktop browsers, with the developer tools open.

Current CSS

Currently, the scrollbar is being hidden with Media Queries for larger window sizes, by overflowing it on its parent container —> that is styled to overflow: hidden. On small screens, the sidebar overflow is reset and the scrollbar gets shown. This happens mostly due to the sidebar (.wy-side-scroll) being set from width: 320px to width: auto.

Possible Solutions

Make the sidebar overflow on small screens too (there are several ways to accomplish this with CSS).
Add a JS library to handle the scrollbars.
Don't hide nor change the scrollbar but, instead, make the sidebar 100% width and use the body scrollbar, instead of the element one.

Considerations

The sidebar is ugly mostly on desktop devices, windows OS in my case (not sure about the same browsers in other systems), when narrowing the window bellow what it normally goes by opening the developer tools on the side. Mobile devices already handle this quite well by having better looking scrollbars.

This probably means that a regular user, using a regular workflow, doesn't see the ugly scrollbar, so I wouldn't consider this a priority issue.

Also, seeing that any solution here might have side effects I would probably wait until we have access to a more solid cross browser + cross platform visual testing.

agjohnson commented 3 years ago

For a data point, i get the mini scrollbar on Firefox on Linux:

And on Chromium on Linux:

agjohnson commented 3 years ago

I noticed this with a zoomed out display as well for some reason:

nienn commented 3 years ago

I noticed this with a zoomed out display as well for some reason

This makes sense. The hack to hide the scrollbar is using the element overflow, hidden behind its parent container. So when you zoom out, depending on how the browser handles the zoom, it breaks the display.

agjohnson commented 3 years ago

Ahhh very true, that explains a lot. I know we talked about the parent element overflow hack earlier -- I thought I only tested the hack and never ended up using it.

That definitely explains why it shows up intermittently, and more often for small viewports

readthedocs / sphinx_rtd_theme