fix: Menu items display off the page in FluentMenu

[JamesNK]

🐛 Bug Report

A submenu with a lot of items is displayed off the page:

💻 Repro or Code Sample

🤔 Expected Behavior

I would expect the opened menu to be positioned so that it doesn't go off the page. Photoshopped example:

I see this behavior at https://storybooks.fluentui.dev/react/?path=/docs/components-menu-menu--docs#nested-submenus when expanding a submenu near the edge of the page:

😯 Current Behavior

See above

💁 Possible Solution

Don't always open a submenu at the exact parent item position. Shift it so that it fits within the page.

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

The example you mentioned is related to React, and the new Web Components v3 already handle this:
I haven't tested it in v4 yet, but in v5, it should work the way you want it to.

Example: https://stackblitz.com/edit/typescript-r8uj3h46?file=index.html

peek_2.mp4