feat(cxl-ui): wip adjust dropdown menu positioning

[saas786]

cu-task: https://app.clickup.com/t/28fubth

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js	41.64 KB (+0.62% 🔺)

[anoblet]

Alignment on the y-axis works. Alignment on the x-axis doesn't seem to correspond with the menu items (this might be a screen size issue.) There's also a UX glitch where when you un-focus the menu item (such as by trying to click a different menu item), you see a flash of different frames, and the second click doesn't register.

https://www.loom.com/share/d78216e1c643419280dcf9e66b4fa37a

community.cxl.com uses vaadin-menu-bar as opposed to vaadin-tabs. vaadin-menu-bar handles positioning, responsiveness etc. out of the box. It would take some work, though it might make sense to consider using vaadin-menu-bar instead.

[saas786]

Issues you mentioned are replicable on live https://cxl.com/institute/

Target of this PR is to verify if dropdown (top) menu appears just below the clicked menu, and centred under the clicked menu. You can also experiment with the code and improve it as you see fit.

vaadin-menu-bar what benefits you saw over vaadin-tabs?

[anoblet]

The double click needed to switch menu items happens on live. I don't see the flash of frames though.

vaadin-menu-bar was meant for this use case. It doesn't need any additional logic for positioning, responsiveness etc.

[lkraav]

I recommended to close this PR https://app.clickup.com/t/28fubth?comment=1099495929

[saas786]

I recommended to close this PR app.clickup.com/t/28fubth?comment=1099495929

Closing as suggested.

[lkraav]

Closing as suggested.

I would've waited for @heshfekry to get back and also comment.