Document autosize positioning to avoid floating content being rendered out of the viewport

[yxsmxn]

Component

Menu

Package version

9.54.15

React version

17.0.2

Environment

System:
OS: Linux 6.5 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (32) x64 AMD EPYC 7763 64-Core Processor
Memory: 107.03 GB / 125.78 GB
Container: Yes
Shell: 5.2.15 - /bin/bash

Current Behavior

When a menu popover expands towards the top of the page, it assumes there is enough space for scrolling. If there isn't sufficient room, the items in the upper part of the popover become inaccessible to users and cannot be navigated using keyboard controls

In the attachment, users can only see three out of six menu items. In other scenarios, the page adjusts as users navigate through the items. However, if the menu popover is positioned at the top of the page, the items in the upper part remain hidden and inaccessible

Expected Behavior

We expect the popover to effectively utilize the available space on the page, similar to how other menu popovers behave when there is room to scroll both at the top and bottom.

Reproduction

https://react.fluentui.dev/?path=/docs/components-menu-menu

Steps to reproduce

1. go to "https://react.fluentui.dev/?path=/docs/components-menu-menu"
2. Increase the browser zoom to 400%.
3. Navigate to the theme menu at the top of the page
4. now observe the menu items missing in the menu popover
   

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

engage.cloud.microsoft

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[ling1726]

Generally we recommend users to configure autosize positioning for all positioned elements like menus and popovers https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs#auto-size-for-small-viewport

We haven't done this by default in this major since we want to avoid any unexpected breaks for existing users by doing so. We can consider enabling this by default in the next major

Keeping this issue open to track changes to our docs so that these menus should be autosized to fit small viewports