[ScrollArea] Scrollbar presence or size isn't updated on viewport resize

[vladmoroz]

Bug report

Scrollbars don't auto show/hide nor resize when viewport size changes

https://github.com/user-attachments/assets/28a9a753-2e55-4b9a-8781-1071a0e11e04

[atomiks]

There is already a ResizeObserver for this 🤔 (but not window resize?) . It seems to already work on the main left sidebar nav element when vertically resizing, but maybe this horizontal resizing doesn't resize the observed element(s) for some reason and needs to listen to the window.

[atomiks]

Can't reproduce it in the /experiments/scroll-area demo, with adjusted styles:

https://github.com/user-attachments/assets/719187e0-7238-4a8a-bcbf-6b2d7918aac3

<div
  style={{
    width: 1500,
    height: 1000,
    background: 'linear-gradient(to bottom, red, white)',
  }}
/>

const ScrollAreaRoot = styled(ScrollArea.Root)`
  width: 700px;
  max-width: 100%;
  height: 80vh;
  border-radius: 6px;
  background: #f5f5f5;
`;

+ conditionally removing the &:hover, &[data-scrolling] selector on the visibility of the scrollbars.

[vladmoroz]

Dug in a bit more, looks like it happens in the docs when spreading the props inside the render element

https://github.com/mui/base-ui/blob/69619428a2e45f9135eb20e07c4be6c7e4dc0ae6/docs/src/components/CodeBlock.tsx#L84

Here's a preview link where the scrollbars are always shown: https://deploy-preview-1202--base-ui.netlify.app/react/components/menu

To reproduce, resize the window until a code block in any anatomy section gets overflow

Feel free to close this issue if this is an invalid way to use the render prop.

[atomiks]

Can't reproduce on Safari/Chrome, even on that really old preview - going to close