fix: scrollbar gutters and dialog scrolling on open

[KonnorRogers]

Addresses comments in #1821

@CodingDoug here's a codepen from the preview branch that should show the scrollbar gutter working as expected.

https://codepen.io/paramagicdev/pen/rNbKmQE?editors=1010

[vercel]

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

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Apr 11, 2024 5:38pm

[claviska]

Looks good. The only time it seems to move is in Safari when Show Scroll Bars is set to "Always," but that's the expected edge case from previous conversations.

Do we need a changelog entry for this?

[KonnorRogers]

@claviska it shouldn't move in Safari with scroll bar always 🤔

[claviska]

It's actually the fixed positioned things that are moving.

CleanShot.2024-04-11.at.09.49.03.mp4

[KonnorRogers]

@claviska this seems to be a limitation of fixed positioned elements with padding-right hacks. In theory you would need to do something like this to handle fixed elements shifting:

my-fixed-element {
  position: fixed;
  right: calc(30px - var(--sl-scroll-lock-size, 0px));
}

The good news is this only affects Safari because they do not support scrollbar-gutter: stable;

Bootstrap has the same issue:

https://codepen.io/paramagicdev/pen/xxezdKM

[KonnorRogers]

Should probably add a comment to the code, but by moving the overflow to the body, it prevents the "scroll to top" issue mentioned in #1951