[Bug]: ContextualMenu doesn't respect spacing limits of LayerHost

[jcksonhe]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 521.17 MB / 15.71 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Are you reporting an Accessibility issue?

no

Reproduction

https://codepen.io/jcksonhe/pen/OJedayw

Bug Description

We have use cases where a page has multiple LayerHosts, one of which can open a ContextualMenu. We noticed that ContextualMenus in particular can go beyond its LayerHost and get tucked behind another.

Actual Behavior

Layers created as a ContextualMenu does not respect the spacing limitations of the LayerHost it's rendered within. However, other layers, such as the Callout in the example, does. I couldn't find in the docs that this behavior was by-design either.

Expected Behavior

Expected ContextualMenus to behave like other layers, where it will overflow if its content is larger than the size defined by its LayerHost

Logs

No response

Requested priority

High

Products/sites affected

No response

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.