fix(remove-scroll): skip padding compensation when scrollbar-gutter:stable is set

[Copilot]

When scrollbar-gutter: stable is set on the document, the browser already reserves space for the scrollbar. Zag was still adding padding compensation, causing double-shifting that manifested as a visible gap and layout jump when dialogs opened.

Changes

Added scrollbar-gutter detection

• New hasStableScrollbarGutter() helper checks computed styles for stable or stable both-edges values
• Checks both html and body elements

Conditional padding logic

• Skip padding when stable gutter detected (browser handles spacing)
• Apply padding otherwise (original behavior for backward compatibility)
• Applied to both standard and iOS scroll prevention paths

// Before: Always adds padding
setStyle(body, {
  overflow: "hidden",
  [paddingProperty]: `${scrollbarWidth}px`,
})

// After: Conditional based on scrollbar-gutter
const styles = { overflow: "hidden" }
if (!hasStableGutter && scrollbarWidth > 0) {
  styles[paddingProperty] = `${scrollbarWidth}px`
}
setStyle(body, styles)

Browser Support

scrollbar-gutter is supported in Chrome 94+, Firefox 97+, Safari 16.4+. Older browsers fall back to existing padding behavior.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>scrollbar gap replacement not required when scrollbar-gutter set to stable.</issue_title>
<issue_description><!---
Thanks for creating an issue 😄!

Please search open/closed issues before submitting. Someone
might have asked the same thing before 😉!

Please fill out all of the sections of this template marked as REQUIRED! We
ask for this information because we need it in order to understand your issue
and quickly diagnose it or provide a solution. Failure to provide the
required information will result in your issue being closed.

We're all volunteers here, so help us help you by taking the time to
accurately fill out this template. ❤️
-->

🐛 Bug report

When:

html {
  scrollbar-gutter: stable;
}

Is set, the document doesn't shift when the scrollbar is there or not, but Zag still adds a 10px gap to replace the scrollbar causing the entire page to shift

💥 Steps to reproduce

1. Click "Open Dialog"
2. See the gap on the right side of the screen (the red header shows this the best)

💻 Link to reproduction

Stackblitz reproduction: https://stackblitz.com/edit/aeybovqd?file=src%2FDialog.tsx

🧐 Expected behavior

There should not be a gap on the right side of the screen

🧭 Possible Solution

Either zag needs to not add that 10px gap when scrollbar-gutter: stable is detected or even better, zag should apply scrollbar-gutter: stable themselves instead of the 10px gap.

If both are not possible I would like to see a prop like "fillScrollbarGap" or something similar.

🌍 System information

Software	Version(s)
Zag Version	1.26.4
Browser	Chrome
Operating System	Windows 11

📝 Additional information

</issue_description>

<agent_instructions>This is related to the prevent scroll function implementation. Learn from other libraries and have a go at fixing this issue.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes scrollbar gap replacement not required when scrollbar-gutter set to stable. #2807

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 561632e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
zag-nextjs	Ready	Preview	Oct 28, 2025 11:50am
zag-solid	Canceled		Oct 28, 2025 11:50am
zag-svelte	Ready	Preview	Oct 28, 2025 11:50am
zag-vue	Canceled		Oct 28, 2025 11:50am
zag-website	Ready	Preview	Oct 28, 2025 11:50am

[Hugos68]

@segunadebayo This looks awesome! Thanks for picking this up!