Collapsed toolbar flyout positioning

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.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.

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.

#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.