search

bluesky-social / social-app

The Bluesky Social application for Web, iOS, and Android
https://bsky.app
MIT License
9.14k stars 1.18k forks source link

Add CSS { scrollbar-width: thin; } to div and root so that scrollbars look better on Windows, as they do on MacOS #3248

Open adamatic-me opened 7 months ago

adamatic-me commented 7 months ago

Is your feature request related to a problem? Please describe.

On Windows, (and maybe Linux?) scrollbars are ugly by default. On MacOS, scrollbars are handled much prettier. Here is an effort to pass that on to Windows users.

Describe the solution you'd like I am a muggle, but this CSS hack led to the results that I would like to see:

:root, div { 
  scrollbar-width: thin; 
}

Additional context

https://caniuse.com/?search=scrollbar-width

Before screenshot: image

After screenshot: image

If you are curious why there is a horizontal scrollbar on the feed list div in my screenshots, see: https://github.com/bluesky-social/social-app/issues/3246

The screenshots above are windows chrome. Below is FireFox, where { scrollbar-width: thin; } looks even better, as the scroll arrows are not displayed. image

adamatic-me commented 7 months ago

Even prettier, much more MacOS-like, and IMO the ideal experience hides the scrollbar on divs until hover:

  :root {
    scrollbar-width: thin; 
  }
  div {
    scrollbar-width: none;
  }
  div:hover {
    scrollbar-width: thin;
  }

https://github.com/bluesky-social/social-app/assets/146130101/a09359d0-e911-4367-a6ce-b716e8e4a375