Items in main menu bar slightly too low

[JasonWeill]

In Notebook 7.0.0a17, items in main menu bar are a px (or 2) too low just like JupyterLab used to be.

This was found by @ellisonbg during a bug bash.

[codingsagar]

Please assign this issue to me. I will do my best and this will be my proper first open source contribution. Please assign as soon as possible.

Thanks

[ellisonbg]

This would be a good first issue - @JasonWeill fixed this in JupyterLab already and may be able to point you in the right direction.

[codingsagar]

So is this issue fixed ?

Thanks

[JasonWeill]

It may not be fixed in Notebook, but if you make a CSS change in Lumino, you may effect desired changes in both JupyterLab and Notebook. (I couldn't find a PR of mine specifically in JupyterLab about menu bar positioning.)

[codingsagar]

Thanks will look into the issue.

[codingsagar]

I could find menu.css just wandering is this the file to fix. Sorry , its a huge project I am trying my best to fix. If you could give any advice like setting up the project how to see the changes or any suggestion. I will be happy to follow those instructions.

Thanks

[JasonWeill]

@codingsagar The menu.css file you mentioned is in the default theme for Jupyter Notebook. If you make a fix there, the bug may still occur in other themes, like the dark mode theme.

I would recommend looking at the Lumino (lm) menu bar widget and its styling, in the Lumino project: https://github.com/jupyterlab/lumino/ . If you can fix the styling in Lumino, then projects like Jupyter Notebook and JupyterLab that depend on Lumino will be fixed, once we release a new version of Lumino with your fix and upgrade the other projects to use this new version.

[codingsagar]

Sir, If I am not wrong as you can see in the above screenshot the web view in which clearly there is a border top but not border bottom so due to that the menu items are not vertically placed properly they are a px down due to that border and I don't get it why to give them border if transparent but that's okay. As then in Lumino you can see the below screenshot same class but no border top as someone fixed it maybe.

[Zyosiah]

has this issue been fixed or is it still open?

[JasonWeill]

I'm still seeing it in tip of main in the notebook code. Lumino has been updated, but either Notebook is declaring some custom CSS or it's. using an older version of Lumino.

[JasonWeill]

The code seems to be imported from the @jupyterlab/application package:

https://github.com/jupyterlab/jupyterlab/blob/41be86d5142a793ab9cb8b9eb99f92a33c8dc441/packages/application/style/menus.css#L33-L39

In JupyterLab (top) and Jupyter Notebook (bottom) you can see that the pulldown menus have a very similar appearance.

[JasonWeill]

Because this bug is also present in JupyterLab, I opened a bug in JupyterLab: jupyterlab/jupyterlab#16108

Closing this issue. Let's continue the discussion in the issue linked above.