[drawer] Scroll lock applies html `scrollbar-gutter: stable`
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
- `html.style.scrollbarGutter = "stable"` is applied while the drawer is open
- A visible gutter appears outside the drawer
- The gutter belongs to the page root, not the drawer
## Expected behavior
- no visible gutter outside the drawer
- gutter compensation should not be visible for side drawers
- a prop/config should exist to disable this behavior
-
## Reproducible example
1. Open https://base-ui.com/react/components/drawer
2. Open the right-side drawer example
3. Inspect `html`
4. Observe inline style: `scrollbar-gutter: stable`
5. Notice the reserved gutter/blank strip outside the drawer
## Base UI version
^1.3.0
## Which browser are you using?
Chrome
## Which OS are you using?
Ubuntu & Windows
## Which assistive tech are you using (if applicable)?
Voiceover/JAWS etc.
## Additional context
This may be intentional for layout shift prevention, but for side drawers the reserved root gutter becomes visibly detached from the drawer and looks broken
Contributor guide
Assessment
This issue has not been assessed yet.