fix: Scrollbars appear when opening FluentPopover near screen edge

[JamesNK]

🐛 Bug Report

See:

Seems kind of similar to #2736

💻 Repro or Code Sample

Code here: dotnet/aspire#6607

The problem appeared when the button that the popover is anchored to moved near to the edge of the page.

🤔 Expected Behavior

No scroll bars added because popover content is inside browser window

😯 Current Behavior

Scroll bars added.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[dvoituron]

I think the best solution is to hide the scrollbar in the body tag, because your main container will then display the scrollbar.
But you can also add the FixedPlacement="true" attribute to convert the CSS position: absolute; to position: fixed;.

body, .body {
    overflow: hidden;
}

Before

After