Focus plugin causes layout with .noscroll and scrollbar-gutter

[dotfrag]

Focus plugin .noscroll causes layout shift when scrollbar-gutter is set to stable.

That is because .noscroll adds a padding-right to the size of the scrollbar, to prevent layout shift:

alpine/packages/focus/src/index.js

Lines 201 to 204 in 28a2aa8

	let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
	document.documentElement.style.overflow = 'hidden'
	document.documentElement.style.paddingRight = `${scrollbarWidth}px`

But when scrollbar-gutter is already set for the same reason, this causes a layout shift (essentially doubling the actual padding), in a failed attempt to prevent it.

I do not know what the best approach is, because scrollbar-gutter can be set on any element, but for this specific scenario, most of time, the property is set on the html (document) element. So a possible solution could be to check for its existence:

let scrollbarGutter = window.getComputedStyle(document.documentElement).scrollbarGutter

if (scrollbarGutter == 'auto') {
    document.documentElement.style.paddingRight = `${scrollbarWidth}px`
}

[dotfrag]

Submitted PR #4512.