Menu Displays Submenus Outside Viewport on Mobile

[yanmariomenev]

Description

When the Menu is rendered near the viewport edge, submenus extend beyond the visible area. Clicking "More Items" and selecting "Schedule Closed" causes the submenu to appear on the right instead of adjusting to stay within the viewport. The issue does not occur for the "Change" menu.

Now when testing in Firefox the above behavior isn't present on the landscape mobile view, but if you set the vertical mobile view the initial menu popup will not render in the correct position.

Steps To Reproduce

1. Use the link: https://angular-kz6kjvvb-mgeimojs.stackblitz.io/ - editor example
2. Open Developer Tools, go to the Device Toolbar, select "iPad Mini" or set the resolution to 1024x768, and switch to landscape mode.
3. Click on the "More Items" menu at the end, then click on the "Schedule Closed" menu. The submenu will exceed the viewport.

This also applies to Firefox, but for the wrong menu position you have to set the mobile view to vertical.

Screenshots or video

Chrome interaction:

Screen.Recording.2025-03-24.at.9.26.26.mov

Firefox interaction:

Screen.Recording.2025-03-24.at.9.27.01.mov

Actual Behavior

.

Expected Behavior

.

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response