fix: overflow causes loss of background for Panels with scrollbars.

[ApacheTech]

🐛 Bug Report

Within a FluentDialog, rendered as a Panel, having more vertical content than the screen height causes the background to disappear, when scrolling. Currently, the scrollbar operates on the whole layer, not just the control part.

💻 Repro or Code Sample

1. Create a IDialogContentComponent with lots of repeated text. 100 lines of <p>Vertical Overflow</p> should suffice for most screens.
2. Render this as a Panel, using IDialogService.ShowPanelAsync().
3. Scroll down.

🤔 Expected Behavior

When you scroll, the content should be contained within the white background (by default) bounds of the panel.

😯 Current Behavior

When you scroll, the white background bounds of the panel stop at 100% of screen height, and the content continues on a transparent background. I cannot take screenshots, due to working on closed-source projects.

💁 Possible Solution

Within file: https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Dialog/FluentDialog.razor.css

fluent-dialog[class~="right"]::part(control),
fluent-dialog[class~="left"]::part(control) {
    overflow-y: scroll;
}

Another solution would also help to style the Panel in a more consistent, and user-friendly way:

fluent-dialog[class~="right"]::part(control),
fluent-dialog[class~="left"]::part(control) {
    display: flex;
    flex-direction: column;
}

:is(fluent-dialog[class~="right"], fluent-dialog[class~="left"]) .fluent-dialog-body {
    flex-grow: 1;
    overflow-y: scroll;
}

This would force the header to the top of the screen, force the footer to the bottom of the screen, and allow the content to scroll within it's own bounds, always taking up the remaining space between.

I would also recommend using 100dvh, instead of 100%, to specifiy "full-height".

🔦 Context

When creating forms with dynamic content, being able to scroll down a Panel is very important. You have also used !important, which made it even more difficult to override scecificity.

🌍 Your Environment

• OS & Device: Windows 11 Enterprise
• Browser: Tested in Firefox, Chrome, Edge, and Opera
• .NET and FAST Version: .NET7, FluentUI-Blazor v3.2.0