Layouts break depending on status of 'Show Scroll Bars' OS setting on MacOS

[jkomoros]

If the setting is 'Always', or in some conditions when it's set to automatically and it moves from a trackpad to having a mouse, the scroll bars show up and the layout breaks.

One of the main ways it breaks is the find dialog stops working, presumably because the scroll bars take up more space in the layout, breaking something.

[jkomoros]

Overflow-y:overlay should fix this?

[jkomoros]

overflow:auto?

[jkomoros]

This also makes many cards that have full content show a scrollbar too, which then guarantees they don't fit (to fit the scrollbar)

[jkomoros]

http://localhost:8081/c/acknowledge-other-plausible-worldviews is a card that will overflow will scroll bars

[jkomoros]

https://gist.github.com/IceCreamYou/cd517596e5847a88e2bb0a091da43fb4

[jkomoros]

overflow:overlay doesn't work, because at least on desktop it renders the scrollbar as an always-on, with a background track, obscuring the content. I've tried getting the scrolbar track to go away with psuedo-element styling but not having much luck

Also, for long cards, part of it is that they are just a little bit scrollable when they shouldn't be scrollable at all. Maybe there's an extra paragraph break or something at the end?

[jkomoros]

https://webkit.org/blog/363/styling-scrollbars/

[jkomoros]

https://codepen.io/ppolyzos/pen/nDbaq

[jkomoros]

Mac's default behavior is to have a scrollbar take up no width, and render a scrollbar-thumb that goes away when the user isn't scrolling. But if a wired USB mouse with a physical scrollwheel is plugged in, the scrollbars always show.

I have used overflow:scroll a lot, because in my development environment it's basically the same as overflow:auto. But with a USB mouse plugged in (or the system settign for "Always" for show scroll bars) that means there are scrollbars that take layout space even when they aren't needed.

If you switch to overflow:overlay, that's like overflow:auto (doesn't take up layout space) but the scrollbar is always visible (with that system setting on or USB mouse plugged in) thus obscuring the content beneath.

The answer is likely to use overflow:overlay for all places i'm currently doing overflow:scroll (or overflow:auto) and then figuring out a way to style it so the scrollbar's background track is transparent even when that user setting is enabled.

[jkomoros]

Something like

                .primary::-webkit-scrollbar {
                    -webkit-apperance: none;
                    width: 7px;
                }

                .primary::-webkit-scrollbar-track {
                    background-color:transparent;
                }

                .primary::-webkit-scrollbar-thumb {
                    border-radius: 4px;
                    background-color: rgba(0,0,0,.5);
                    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
                }

kind of does it, but the thumb is too strong and never fades away. And also, even when force scrollbars isn't on (the default system setting / behavior on macs), it force-renders that always-present scrollbar. So maybe the answer is to detect the value of that scrollbars setting via javascript and only set those values on the scrollbar in the case that it's in the USB mouse mode. And make the thumb way more transparent unless hovered.

[jkomoros]

Have a Scroller style ScrollerSharedStyles, and a .scrolling class that all of th eproperties are under. It should globally check at initialization whether to show scrollbars or not for the scrollable behavior.

[jkomoros]

• [x] Test on Safari and on mobile
• [ ] Get the style as close as possible

[jkomoros]

Still not entirely fixed. There are horizontal bars in the find dialog by default, the visual overscroll for cards with overscroll content doesn't seem to show up, and when on a computer with a USB mouse ugly scroll bars show up in at least some cases