Poor default presentation of menu items with longer names in mobile overlay

[hagege]

Description

Navigation Block: On mobile devices (mobile menu), longer menu items are apparently displayed left-aligned instead right-aligned from a certain width - regardless of which block theme I use, i.e. also with Twenty Twenty-Five.
I was able to simulate the issue in the developer console via Playground. To be on the safe side, I also created a “real” test page and was able to reproduce the issue there as well on mobile device.

Step-by-step reproduction instructions

1. Create a menu with the navigation block in TT4
2. Create a menu item for example "Creating Webdesign with WordPress 6.7"
3. Save menu
4. Show Website on mobile device

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[sarthaknagoshe2002]

Hey @hagege can you please provide more details to reproduce this bug.

[getdave]

I think what we're seeing here is that the menu items are right aligned. Therefore to denote a hierarchy the sub levels are indented. However, because the alignment is to the right then the indentation happens from the right. This is expected behaviour.

However, I acknowledge the presentation of submenus in the overlay on the Nav block needs improvement. Therefore I am closing this in favour of #44346