Collapsed toolbar flyout positioning

@mherchel suggested using the Floating UI library which should be in core when the Splitbutton issue ✨ Add new Splitbutton render element to eventually replace Dropbutton Needs work is merged. Since it's not in core yet, we can add the library to this module and use it for the placement of the flyout menus.

Thanks for the work on this. There are several things wrong.

• JS console error while hovering floating-ui.dom.umd.js?v=10.1.1:157 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
• Flyouts still aren't positioned properly. When I intentionally make my screen very short (to where it covers part of the configuration flyout), I expect the flyout to reposition so it is not obscured by the bottom of the viewport. Unfortunately this doesn't happen.
• It's very difficult to move the mouse from the button that triggers the flyout to the actual flyout. Frequently the flyout will close very quickly.
• The flyout still isn't vertically centered.
• It also needs to be brought up to date with the main 1.x branch

I have addressed some of the feedbacks mentioned in #11 📌 Collapsed toolbar flyout positioning Fixed .I think we need to handle flyout's position using some css.For now i have removed the offset used in the floating UI library which solves the problem of flyout closing quickly.

Thanks for addressing that feedback @Utkarsh_33!

I just took a look and I'm seeing the following two bugs:

1. The flyouts for items at the top and bottom of the screen are being cut off. They should be repositioned with the help of the js library so they're always visible.
2. Some of the contents of the flyouts are overflowing from their containers

working on this

Flyout menus are vertically centered now and addressed the two bugs in comment #13.

Attaching the screen shots demonstrating that the arrow element is attached to the flyouts.

Hi @hooroomoo, thanks for your work on this. It's looking great!

I'm just seeing one more bug. When you hover over the user menu (see screenshot), there is some funky formatting and the flyout is showing in the middle of the screen.

#20 should be fixed now

This is looking really good! Setting to RTBC because the goal of this is testing. A couple notes

• RTL doesn't work. This can be fixed when we move to Drupal
• If you have a short viewport, and activate a large hover flyout near the bottom of the screen it positions properly.... but, if you then expand a submenu, the menu will shift so that some menu items are obscured by the edge of the screen. Ideally, we'd have an event listener check for that and reposition only if necessary. That being said, this is an edge case, and we can fix it followup.

Excellent work. Than you!

Setting credits

Merged this so the improvements can used on the testing and the missing parts and @todos can be worked in follow-ups with smaller MRs.

Automatically closed - issue fixed for 2 weeks with no activity.