Decrease top menu padding for high zoom / narrow screen

[gabalafou]

References

PR #15855.

This is the first of a series of PRs breaking up #15855 into individual CSS changes, with the hope that this will make it easier to tackle the issues that we've been having with Playwright Galata snapshot testing.

Code changes

Updates the padding rule for the .lm-MenuBar-item CSS selector so that menu bar items will all fit within narrow or zoomed-in screens.

User-facing changes

See above.

Backwards-incompatible changes

n/a

How to test

Load JupyterLab. Drag window wide, drag window narrow. Observe how it affects padding in the menu bar. At 480px, padding should start to decrease. At 320px, the top menu bar items (File, Edit, View, Run, Kernel, Tabs, Settings, Help) will be scrunched together but should all be visible, as the following screenshot shows:

Alternatively, set your browser window to 1280px, then zoom in to 400%. Again, the menu items will be tightly spaced but should fit within the width of your browser window.

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[gabalafou]

Note: 480px was chosen through trial and error. At around 420px with 8px padding between menu items, the menu bar starts to be too wide for the screen width. 480px gives a little wiggle room.

This gave two equations to solve:

(480px)a + b = 8px
(320px)a + b = 1.5px

Because at 320px, the padding needs to be set to 1.5px for the items to fit. Solving the equations gives:

a ~= 0.04 (equivalent to 4vw)
b ~= -11.2px

[krassowski]

I hesitated to review this PR because I am moderately against this change, but since no one else had left a review, here we go:

Among all the changes in #15855, this one appears to me to be the most controversial, because it fixes one accessibility issue (visibility of options at 400% zoom) by introducing another accessibility issue (too small tap targets).

I think this issue would be better solved by making use of the hamburger menu. While it is a tricky thing to get right, there was already a lot of effort put into it:

• Collapse main menu options in a hamburger menu in small screens and high zoom #13148
• Collapse main menu options in a hamburger menu lumino#489

[krassowski]

Of note WCAG 2.2 requires:

• for AA 24 CSS pixels
• for AAA 44 CSS pixels

This PR makes all the menu items except for "Kernel" and "Settings" smaller than 44 CSS pixels in width:

However, if there are more voices in favour of this PR (please comment) I would not want to block this getting merged.

[krassowski]

Another thought is that it does not really solve the problem when:

• extensions add menu entries; for example in a deployment which adds "Services" in between "Settings" and "Help", then "Help" will still be inaccessible
• using any language other than English in which translated strings take up more space than the English ones (which is many languages)