A second level sub menu should not open on top of the original menu even when that is close to the right edge

[Artur-]

Description

When you have multiple levels of sub menus and no space to the right of the original menu, you would expect sub menus to keep opening to the left and not like currently that the first sub menu opens to the left and the next sub menu overlaps the original menu (probably with 3rd level overlapping the first etc, did not test)

Expected outcome

The sub menus keep opening in the same direction as originally, unless the left edge is hit, then the direction changes again.

Minimal reproducible example

const items = [
  {
    text: 'Share',
    children: [
      {
        text: 'On social media',
        children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
      },
    ],
  },
 

return <MenuBar items={items} /> ;

Steps to reproduce

Place it at the right edge, open it

Environment

Vaadin version(s): 24.7 alpha
OS: macOs

Browsers

Issue is not browser related