fix: [SiteSettingsPanel] Additional information about Reset Settings is cropped.

[c0g1t8]

🐛 Bug Report

💻 Repro or Code Sample

Additional information about Reset Settings is cropped.

🤔 Expected Behavior

Be able to see the addtional information.

😯 Current Behavior

Information is cropped.

💁 Possible Solution

Looks like another overflow setting issue.

🔦 Context

Affects user experience with demo site.

🌍 Your Environment

• OS & Device: PC and IPad
• Browser: Microsoft Edge, Google Chrome, Apple Safari
• .NET and Fluent UI Blazor library Version: 8.0.4 and 4.6.1

[c0g1t8]

Can you assign to me?

[c0g1t8]

I was able to 'uncrop' the information provided in the FluentPopover using the browser debugger tools. I found two methods.

1. Setting of the CSS position attribute of the underlying fluent-anchored-region web component to fixed. This attribute is set directly in the rendered DOM. It can't be overridden using CSS only. It would require changing The downside was that you could not scroll if the information extended beyond the bottom of the screen.

   One way of achieving this would be set the FixedPlacement parameter of the FLuentAnchoredRegion. This would necessitate exposing an new parameter for FluentPopover.

2. Removing the 'overflow-y' parameter from the fluent-dialog web component which contains the information. The behaviour would be unchanged with the exception that all the information would be visible.

   Though I prefer this behaviour, I don't believe making this change to FluentDialog is worthwhile to address this one issue. I could likely achieve this with some isolated JavaScript in SiteSettingsPanel.

Is submitting a PR based on Option 1 above worthwhile? FixedPlacement would default to false to ensure backward compatibility.

[vnbaaij]

I think we need the parameter sooner or later anyway. Let's expose it on the Popover