oxidecomputer / oxidecomputer/console
Weird blank scrollbar space next to side modal when mouse plugged in (on Mac)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 228
- Forks
- 22
- Avg merge
- 19h 42m
- Merged PRs (30d)
- 32
Description
Look at the right edge. It appears when the mouse is plugged in, disappears when it's not. Charlie and Joe didn't see it because they didn't have a mouse plugged in.
See https://github.com/mui/base-ui/issues/4645
🤖 Fable explanation
Found it — the scrollbar-gutter: stable isn't in our CSS at all. It's injected by Base UI's dialog scroll lock. When the side modal opens, useScrollLock in @base-ui/utils sets scrollbar-gutter: stable plus overflow: hidden on <html> (node_modules/@base-ui/utils/esm/useScrollLock.js:32), and restores the original values on close. The point is to hide the page scrollbar while the modal is open without the content reflowing into the freed-up space.
Why only you see it: the property still only has a visible effect with classic scrollbars. On your machine (mouse plugged in, or "Show scroll bars: Always"), the scrollbar is a real ~15px column — when the modal opens, the scroll lock hides the scrollbar and the stable gutter keeps that 15px reserved, so you see an empty strip where the scrollbar was. Your colleagues on trackpads have overlay scrollbars with zero width, so the same code produces no visible change. Cross-browser and extension-independent because it's driven by the macOS scrollbar mode, not browser state.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the side modal on macOS with classic scrollbars enabled, then inspect the dialog scroll-lock behavior described in @base-ui/utils/esm/useScrollLock.js:32 and compare https://github.com/mui/base-ui/issues/4645. Determine how the modal should behave without the blank right-edge space, and verify the result with the affected modal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100