Settings Editor is not easily usable on mobile

jtpio commented 2 years ago

Description

At the moment the Settings Editor doesn't seem to be mobile friendly.

Reproduce

Testing with JupyterLab 4.0.0a22 with this gist: https://gist.github.com/jtpio/4e9a3d435d7c3950dc4150c10abbb1d7

Expected behavior

It should be possible to modify settings easily on devices with a narrower viewport.

Maybe the left menu should be made collapsible so the rest of the settings could be more easily scrolled via touch actions?

Context

This was also noticed when trying to add the Settings Editor to Notebook v7 in https://github.com/jupyter/notebook/pull/6316.

krassowski commented 2 months ago

Note from frontends call: as of JupyterLab 4.2 the layout on the right side is simplified but the sidebar is still taking up a lot of space.

bollwyvl commented 2 months ago

Some thoughts:

moving the Search box to the mostly-empty toolbar
add a switch to the toolbar to toggle the separately-scrollable sidebar (toggle off by default when narrow... this could happen even in a small dimension split panel)

| settings|
+-------------------------------------------------------------------------------------+
| [🗒]  [🔍 search               ]   [x] sections only                [↗️ JSON editor] |
+-------------------------------------------------------------------------------------+
|  > Code Completion                                                                  |
|  > Code Console                                                                     |

Probably still need to use some CSS to tighten up the form on narrow screens and make more reactive (nothing to do about super-custom controls that expect a wide screen).

jupyterlab / jupyterlab