[menu-bar] sub-menu overlay wrongly placed in some phones

[DiegoCardoso]

Description

When a sub-menu is opened for some phones (e.g. iPhone 13 Pro Max), the overlay is misplaced at the top-left corner.

That happens because, although the device is correctly detected and the phone attribute is added to the overlay, the _updatePosition method in the vaadin-overlay-position-mixin sets values for justify-content and align-items that overrides the ones set by the :host([phone]) selector:

In smaller phones, the overlay correctly opens on the bottom of the page because they are detected by the @media query for small devices:

Expected outcome

Either the sub-menu opens on the bottom of the screen as it happens in other mobile devices (preferably) or it's correctly placed relative to the parent menu item.

Minimal reproducible example

It can be seen in the dev/menu-bar.html page

Steps to reproduce

I wasn't able to verify this on my iPhone 13, but with the iOS Simulator:

1. Open the dev/menu-bar.html page
2. Click on the "Share" item

Environment

Vaadin version(s): 23+
OS: iOS (Probably can be verified in bigger phones running Android as well)

Browsers

Safari on iOS