fix: prevents a possible scrollbar related layout shift during zoom in/out

[millette]

Force vertical scrollbar on body.

Why

Currently, the page reflows a little bit when zooming since the vertical scrollbar disappears, making the page larger.

How

Forcing the scrollbar means the page doesn't get wider (even a little bit) when zooming.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
starlight-image-zoom	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 9:16am

[HiDeoo]

Thanks for your contribution 🙌

Sorry for the delay in reviewing your code, it looks like this PR totally slipped through my notifications.

I tested the change on macOS with various scrollbar configurations (always visible, visible when scrolling, etc.) and it looks like the approach used in the PR does not prevent the issue in all cases. It also has the side effect of making the scrollbar always visible, even when not needed which is not ideal.

I think a better approach would be to stop enforcing an hidden overflow on the body element through CSS and instead, use JavaScript to do the same when opening the dialog while also constraining the body's width. When the dialog is closed, the overflow and width should be reset to their original values.

I'll investigate a bit more later today and test on more devices to make sure the solution works in all cases, but if it does, I'll update the PR with the new approach.

[millette]

It also has the side effect of making the scrollbar always visible, even when not needed

It's probably a personal preference, but I don't like when layouts change in width for shorter or longer pages. Forcing the scrollbar means pages all have the same width so it's predictable. That was my intent at least.

[HiDeoo]

I've implemented the new approach I mentioned earlier which should prevent layout shifts during zoom in/out no matter of the scrollbar user preferences. I've tested it on macOS and Windows and on most of the browsers and it seems to work fine.

Thanks for the contribution and patience 🙌