fix: Scrollbars appear when opening a FluentMenu

[JamesNK]

🐛 Bug Report

There was a regression when moving from 4.9.3 to 4.10.1. Horizontal scrollbars appear when opening a FluentMenu.

Before:

After:

💻 Repro or Code Sample

This was the change that introduces the regression: https://github.com/dotnet/aspire/pull/5670

Control on the page with the issue: https://github.com/dotnet/aspire/blob/f7f20e4c12dafa5b4b50c2b42f31cc2b1327fa37/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor

🤔 Expected Behavior

No scroll bars.

😯 Current Behavior

Scroll bars appear.

💁 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]

Probably caused by the position of the <FluentMenuProvider /> which should be in an HTML section containing a overflow-y. Is it possible in your code?

You can disable the usage of this Provider by adding the UseMenuService="false" attribute. In this case, the menu is drawn at the location of your HTML code.

[JamesNK]

Is being an a section with overflow: auto ok?

~I tested more and found the scrollbars only appear when the browser is zoomed in, e.g. 110% size.~

[JamesNK]

I tested more and the issue only happens when the menu is close to the edge of the page. I guess going from 110% to 100% zoom above happened to move the menu far enough way for the issue not to happen.

[vnbaaij]

So this can be closed?

[JamesNK]

No. Scroll bars shouldn’t be appearing. The menu isn’t going off the edge of the page.

[dvoituron]

Have you tried adding <FluentMenu UseMenuService=‘ false’ /> to revert to the previous usage?

[JamesNK]

Yes: https://github.com/dotnet/aspire/pull/6039. But it is a temporary fix because the menu can be hidden by splitter areas again.

We need fluent menu provider but not have it add scroll bars.

[dvoituron]

Yes: dotnet/aspire#6039. But it is a temporary fix because the menu can be hidden by splitter areas again.

We need fluent menu provider but not have it add scroll bars.

OK. Let me take a look

[dvoituron]

The problem is that the body allows overflow, and with the new FluentMenuProvider, a side effect may be the display of this scroll bar.

You can solve that adding this code in the app.css file

body, .body {
    overflow: hidden;
}

I haven't seen a problem disabling scrollbars in body, as it seems that a layout div adds scrollbars if necessary.

[dvoituron]

I've found another way to avoid displaying this body scrollbar: using display: fixed. I will create a PR to include these styles by default in the FluentUI Blazor library, but in the meantime, you can use it.

<div style="position: fixed; bottom: 0;">
    <FluentMenuProvider />
</div>

[JamesNK]

Thanks, that works.