MenuBar example is currently broken

[thomasjm]

Description

Reproduce

1. cd lumino
2. npm install && npm run build
3. cd examples/example-menubar
4. npm install && npm run build
5. google-chrome index.html (or browser of your choice)

Expected behavior

Menu should open and look normal.

Context

I suspect this is related to #432.

• Operating System and version: Ubuntu 22.04.2
• Browser and version: Chrome 114.0.5735.133 (Official Build) (64-bit)
• JupyterLab version: N/A

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[fcollonval]

Thanks @thomasjm

Would you like to work on a fix or do you have ideas how to fix it?

[thomasjm]

I fixed it in my own Lumino project with a CSS change. This is necessary because of the change from absolute positioning to a CSS transform in #432. The CSS was essentially this:

.lm-Menu {
    left: 0px;
    top: 0px;
}

I'm guessing nobody noticed this problem before because JupyterLab etc. already have similar CSS. I think such CSS should be included directly in the Lumino CSS files so such fixes aren't needed on the user side.

[fcollonval]

Thanks @thomasjm

Make sense it is similar to #595

Would you mind opening a PR to fix this?
I would enforce those style rules in the JavaScript rather than adding CSS as the JS code handles the positioning and this should not be messed with.

You can get an idea where to set top and left by looking at #432 changes.

cc @krassowski - your input will be really appreciate on this one.

[thomasjm]

I would enforce those style rules in the JavaScript

I think the reason #432 stopped doing that was for DOM performance.