`scrollbar-gutter: stable` interferes with Popover positioning (MacOS)

[dlin-wandb]

Provide a general summary of the issue here

When opening a Menu wrapped in a Popover positioned near the right edge of the viewport, the menu gets cut off by the scrollbar gutter. This seems to be occurring because usePreventScroll's preventScrollStandard function sets scrollbar-gutter: stable on the document element, which affects positioning calculations for overlays.

🤔 Expected Behavior?

The popover menu should be fully visible and properly positioned, with a gap between the menu and scrollbar gutter.

😯 Current Behavior

The popover menu's right edge gets cut off by the scrollbar gutter area. When the menu opens, the document element receives scrollbar-gutter: stable styling, but the positioning calculations don't seem to account for a required gap.

💁 Possible Solution

Perhaps don't set this style in

react-spectrum/packages/@react-aria/overlays/src/usePreventScroll.ts

Line 76 in ca2d897

? setStyle(document.documentElement, 'scrollbarGutter', 'stable')

?

Removing scrollbar-gutter: stable in the Elements panel of my browser seems to resolve the issue, though I'm not sure what side effects it might have in other environments/browsers.

🔦 Context

This issue is specific to macOS systems with the "Automatically based on mouse or trackpad" scroll bar setting and external input devices. The behavior doesn't reproduce on trackpad-only usage or with "Show scroll bars: When scrolling" scrollbar settings, but occurs when either of the other options "Automatically based on mouse or trackpad" or "Always" is selected.

🖥️ Steps to Reproduce

Environment
Platform: macOS version 15.7.2
System Setting: "Show scroll bars: Automatically based on mouse or trackpad"
Input Method: External keyboard and mouse
React Aria Version: 1.13.0
Browser: Chrome Version 142.0.7444.60 (Official Build) (arm64)

1. Set up macOS with "Show scroll bars: Automatically based on mouse or trackpad" or "Show scroll bars: Always" enabled
2. Use an external keyboard and mouse
3. Create a popover/dropdown menu positioned near the right edge of the page
4. Click the trigger button to open the menu
5. Observe that the right edge of the menu is cut off

Version

n/a? I am only using react-aria-components, version 1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS Sequoia 15.7.2

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This seems to be an issue within our overlay positioning code,

react-spectrum/packages/@react-aria/overlays/src/calculatePosition.ts

Line 330 in 5d472d4

boundaryDimensions: Dimensions, // boundary

seems to include the scroll bar width when it shouldn't.