sphinx_rtd_theme icon indicating copy to clipboard operation
sphinx_rtd_theme copied to clipboard

Published 20 hours ago • verified publisher icon readthedocs

Ugly sidebar scrollbar on small screens

Open nienn opened this issue 3 years ago • 4 comments

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.

nienn avatar Aug 05 '21 09:08 nienn

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

image

And on Chromium on Linux:

image

agjohnson avatar Aug 06 '21 20:08 agjohnson

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

image

agjohnson avatar Aug 07 '21 03:08 agjohnson

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.

nienn avatar Aug 09 '21 08:08 nienn

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

agjohnson avatar Aug 10 '21 02:08 agjohnson