Scrollbar presence / absence changes top bar layout

[andrei-lazarov]

Describe the bug

Again obsessing over the smallest detail 😅😅😅

When the current page is longer than the screen, the pages becomes slightly narrower to accommodate the scrollbar.
This is enough to cause a layout shift, most notably in the top bar.

The top navigation bar must be fixed while browsing. Buttons constantly moving is very annoying.

Notice how I'm not moving my mouse, yet I'm clicking different buttons

scrollbar.mp4

To Reproduce

1. Find the "perfect" width, where the scrollbar dictates whether the right-most button fits in the top bar.
2. Flip between pages with and without the scrollbar

Probably happens on desktop only. Mobile overlays the scrollbar as far as I can tell

Expected behavior

I expect the webpage to allocate some empty space for the scrollbar?

I found scrollbar-gutter exists. This does the job, but it may not be the prettiest solution.

html {
    scrollbar-gutter: stable both-edges;
}

scrollbar-gutter.mp4

Probably the right way to do it, is some clever padding..

Affected browsers

Chrome

Stacktrace

[Nerivec]

Might be a way with the new scrollbar props ("stable" gutter already present on <main> though...).
Not sure browsers would behave the same though (still not supported in Tailwind...), so, could be varying behavior 😰
Messing with scrolling always ends up breaking something, somewhere, and with virtual rendering depending on it, have to be extra careful 😅

[andrei-lazarov]

("stable" gutter already present on <main> though...).

Hmm, I am on main branch. I think the setting is lost somewhere

[Nerivec]

zigbee2mqtt-windfront/src/layout/AppLayout.tsx

Line 98 in 9263d70

<main className="pt-2 px-2 flex-1 min-h-0 [scrollbar-gutter:stable]">{children}</main>

[andrei-lazarov]

I saw the line of code, but I demonstrated it has no effect..