docs(react-popover): add WithArrowAutosize story to demonstrate autosizing behavior

[dmytrokirpa]

Previous Behavior

If you use a popover with the autosize option and an arrow, when the scrollbar appears, the arrow is no longer visible; this is due to the overflow.

There are a multiple ways of how to fix/workaround the issue described #35438 (comment). TLDR, we need to move overflow from PopoverSurface to underlying element

So here is what happens now:

<Popover positioning={{ autoSize: true }} withArrow> 
 <PopoverSurface> // `overflowY: 'auto'` will be applied to the element 
   <PopoverArrow /> // the overflow clips the arrow
    // content
 </PopoverSurface>

And I'm suggest to create an example with consumer-side workaround like this:

<Popover positioning={{ autoSize: true }} withArrow> 
 <PopoverSurface style={{ overflow: 'unset' }}> // no overflow
   <PopoverArrow />  // arrow is not clipped as there is no overflow on `PopoverSurface`
   <div style={{ overflow: 'auto', height: '100%' }}> // add overflow
     // content
   </div>
 </PopoverSurface>

We could technically handle this behind the scenes, but that might break things since it would mean updating the usePositioning hook (which a bunch of components use) and changing their DOM structure. So, I think it's best to just call this a known limitation for now and document a workaround for anyone who runs into it.

New Behavior

Added a new Popover example demonstrating how to use <Popover positioning={{ autoSize: true }} withArrow> without encountering the issue where the arrow gets clipped.

Related Issue(s)

• Partially adresses [Bug]: Popover - autoSize, Arrow, overflow and scroll #35438

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[bsunderhus]

Should I see the arrow @dmytrokirpa ?

I just tested the preview https://fluentuipr.z22.web.core.windows.net/pull/35513/public-docsite-v9/react/index.html?path=/docs/components-popover--docs#with-arrow-autosize, I can't see it

[dmytrokirpa]

Should I see the arrow @dmytrokirpa ?

I just tested the preview https://fluentuipr.z22.web.core.windows.net/pull/35513/public-docsite-v9/react/index.html?path=/docs/components-popover--docs#with-arrow-autosize, I can't see it

Yeah, it should be visible

Screen.Recording.2025-12-10.at.13.06.02.mov

[bsunderhus]

Seems like its getting cut somehow