fix: Can't access content displayed off the screen in FluentPopover

[JamesNK]

🐛 Bug Report

It's difficult to access content in a FluentPopover that displays off the bottom of the screen.

💻 Repro or Code Sample

This problem can be seen on the popover demo page. If the page is resized so that content is displayed off the the bottom of the page, it isn't possible to scroll with middle-click scrolling or use arrow keys. Clicking on the browser scroll bar hides the popover.

The only thing I found that worked is middle clicking on the popover itself and then scrolling. This isn't intuitive.

🤔 Expected Behavior

Scrolling should work. Or perhaps the popover show display above the button if there isn't room below.

😯 Current Behavior

Can't scroll. Content in popover is hard to access.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: Windows
• Browser: Chrome
• .NET: .NET 8

[dvoituron]

Indeed, I think it would be interesting to add a VerticalThreshold and HorizontalThreshold property, to this component, as described in AnchoredRegion. We createed the PR 1384 for that.

This would avoid the display problem caused by the Status-bar taking up screen space and not being detected by Popover.

<FluentPopover Style="width: 300px;" VerticalThreshold="170" AnchorId="myPopoverButton" @bind-Open="_visible">
   ...
</FluentPopover>

Popover-Updated.mp4

However, once the Popup is displayed on the screen, the rest of the screen cannot be moved. You must click outside the popup to close it.
To use a Popup independent of the rest of the page, there's the AnchoredRegion component, which we use for this Popover. FluentAnchoredRegion has many more configuration attributes.

[vnbaaij]

Fixed with PR mentioned (by adding parameters to set threshold)