fix: Popover Positioning in FluentPopover

[elEs25]

🐛 Bug Report

The Popover appears to not respect the anchor's position and opens partially off-screen. This issue might be related to the AppMenu issues #5214 and #5215.

💻 Repro or Code Sample

@page "/popover"

<PageTitle>Popover</PageTitle>

<FluentTextInput Label="Popover-Width" @bind-Value=@popoverWidth Immediate />
<FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.SpaceBetween" Width="100%">
    <FluentButton id="left-button" OnClick="@(() => popoverPos="left")">Left</FluentButton>
    <FluentButton id="middle-button" OnClick="@(() => popoverPos = "middle")">Middle</FluentButton>
    <FluentButton id="right-button" OnClick="@(() => popoverPos = "right")">Right</FluentButton>
</FluentStack>

<FluentPopover AnchorId="@($"{popoverPos}-button")" 
    Width=@popoverWidth 
    @bind-Opened:get=@(popoverPos is not null) 
    @bind-Opened:set=@(opened => popoverPos = opened ? popoverPos : null)>
    Some Example-Text which does not matter.
</FluentPopover>

@code {
    private string? popoverPos = null;
    private string? popoverWidth = "300px";
}

🤔 Expected Behavior

Popover is fully visible on screen, like it is when opening from anchor on middle of page:

😯 Current Behavior

Opening the Popover on the right:

Or the left:

Leads to only partially visible Popover.

💁 Possible Solution

🔦 Context

🌍 Your Environment

Clean Template Fluent Blazor WebAssembly-App

• OS & Device: Windows on PC
• Browser Microsoft Edge
• .NET 10.0.8 and Fluent UI Blazor library Version 5.0.0-rc.5-26219.1