Sub Menu Bar: don't "open on hover" if overlay is at bottom of page

[AndreasSamjeske]

Description

If your browser window has less than 420px width, sub menus open at the bottom of the page. If there is a sub sub menu it uses the same display area. "Open on hover" makes it difficult to reach items, that are below an item with a sub menu.

Expected outcome

Open on hover shall only be done, if overlay opens next to menu bar.

Minimal reproducible example

https://vaadin.com/docs/latest/components/menu-bar#open-on-hover will do.

Steps to reproduce

1. Visit https://vaadin.com/docs/latest/components/menu-bar#open-on-hover
2. Set width of browser window to less than 420px
3. Hover share. Sub menu opens at the bottom.
4. Try to reach "email".
   Expected:
   No hassle. Just go down with your mouse.
   Actually:
   Hovering "On social media" opens sub sub menu, which overlays sub menu. "email" is difficult to reach.

Environment

Vaadin version(s): 24.4.3
OS: Win11

Browsers

Chrome

[rolfsmeds]

While I feel that open-on-hover is fundamentally problematic from an a11y point of view and should generally be avoided, we could alleviate this by suppressing (essentially disabling) open-on-hover in small-viewport mode.