fix(menu): improve reliability of main content not being scrollable when menu opens

[liamdebeasi]

Issue number: resolves #28399

---

What is the current behavior?

As part of #26976 I fixed an issue where pointer-events: none was not applied until after the menu open gesture finishes. This resolved a bug where scrolling was latching after the menu gesture starts.

However, I did not account for the edge case where scrolling latches before pointer-events: none is applied in the DOM. Since scrolling has already latched then pointer-events: none does not change the scrolling behavior. This can happen if a user swipes up and to the right from the left edge of the screen.

What is the new behavior?

• overflow-y: hidden is now applied to the scrollable content which will interrupt any scrolling when the menu is open.

Does this introduce a breaking change?

• Yes
• No

Other information

Testing:

This bug fixes a timing issue where scrolling latches on the main content as the menu tries to open. As a result, I am unable to write reliable automated tests for this. Reviewers should perform the following test on iOS and Android physical devices:

1. Open src/components/menu/test/basic.
2. Add enough elements to the main page content such that it scrolls (I added a list with items).
3. On each device, attempt to scroll the main content while also opening the menu on the starting edge of the screen.

Scrolling on the main content should not happen if the menu opens.

Dev build: 7.6.5-dev.11705341148.1a550d3b

[averyjohnston]

Tested on my physical Android and iOS devices, works great 👍