A "tight layout" mode that reduces vertical spacing

[kolibril13]

A design with generous vertical spacing looks nice on big screens.

However, on a small Laptop screen, it's in my opinion better to have a tighter layout to fit more lines of code on the screen.
Therefore, it would be nice to have a "tight layout" mode, that reduces vertical spacing in a notebook.
I've made 4 screenshots from the same notebook to show how vertical spacing is varying from platform to platform (and VSCode wins the contest of largest white space areas):

1. from JupyterLab
2. from a Gist
3. from VS Code
4. from VS Code diff

All screenshots are made with default zoom setting and used this notebook https://gist.github.com/kolibril13/cdecff2da4f12dcbc5ffae449a5e9572
My machine is a MacBoc Air M1, Retina display, 13.3-inch (diagonal).

It would be amazing if vertical spacing was customizable in VS Code Jupyter!

1. JupyterLab

2. Gist on GitHub

3. VSCode (note how the last cell output is not on the screen anymore)

4. VSCode diff

[amunger]

related, but for IW: #156803

[rebornix]

@kolibril13 thanks for your feedback. This has been brought up multiple times and we can see the value of having a more compact view for notebook editor.

The main reason VS Code's default notebook view has more spacing is it renders more components than the Jupyter Notebook, including

• A toolbar to insert between cells
• A breadcrumb to show the TOC of the notebook file and cell
• Cell toolbar which allows you to run operations against the target cell
• Cell status bar for execution state and cell language

If we disable these components (the functionalities are still available through commands, or through other components) with following settings

    "notebook.insertToolbarLocation": "notebookToolbar",
    "breadcrumbs.enabled": false,
    "notebook.showCellStatusBar": "hidden",
    "notebook.cellToolbarLocation": {
        "jupyter-notebook": "hidden"
    }

VS Code

Chrome/Jupyter Notebook

@kolibril13 do you wanna give the settings a try and see how they work for you?

[rebornix]

I pushed this a bit more by

• moving the global toolbar to the editor toolbar
• changing the editor line height to be the same as Jupyter Notebook (17px)

and I actually get slightly more content rendered than Jupyter Notebook ;). It's not fair comparison as the browser renders the omnitoolbar and Jupyter Notebook renders a menubar (while VS Code's menus are in the system menubar)

and here are all the notebook settings I tweaked

    "editor.lineHeight": 17,
    "breadcrumbs.enabled": false,
    "notebook.insertToolbarLocation": "notebookToolbar",
    "notebook.showCellStatusBar": "hidden",
    "notebook.cellToolbarLocation": {
        "jupyter-notebook": "hidden"
    },
    "notebook.globalToolbar": false,
    "notebook.experimental.outputScrolling": true,
    "notebook.consolidatedRunButton": true,

[kolibril13]

Thanks @rebornix for your quick response and so many great suggestions!
And congrats for winning the "more content rendered than in Jupyter Lab" challenge with VSCode! ;)

I think it's really situation dependent when one prefers more functions, and when one prefers more space.
Maybe there can be a switch command that toggles all these settings at once?

Regarding from your comment above:

A toolbar to insert between cells
A breadcrumb to show the TOC of the notebook file and cell
Cell toolbar which allows you to run operations against the target cell

I totally agree with this, these are nice to have, but also dispensable as there are good alternatives.

Cell status bar for execution state and cell language

In my opinion, the execution state is an important feature.
Maybe this can be shifted up in "tight layout" mode, so that it does not occupy extra vertical space?
In JupyterLab, there is the [*] that indicates cell execution.
And the cell language: How about shifting this to the right bottom corner of the last code line in "tight layout" mode?
But cell language is also not very important to have in a "tight layout" mode, I think.

I've tested your parameters, and it's a huge difference! Thanks a lot for providing these settings! :)
Here is a before/after image comparison:

Screen.Recording.2023-02-24.at.20.40.58.mov

Do we want to take this challenge even further and once test out the tightest vertical spacing that does not harm the readability?

I just took your reduced spaced layout and drew some red lines where I can see potential to further reduce the size:

• A few pixels less at the beginning of a cell.
• A few pixels less at the ending of a cell.
• A few pixel less between the outputs.

Maybe it might look cluttered then, but it would be interesting to see if this was possible.

[rebornix]

@kolibril13 I like the screenshot you posted above very much. You did figure out the padding we added around those components, great work!

A few pixels less at the beginning of a cell.
A few pixels less at the ending of a cell.

We always add a few pixels around the cell editor. The text editor has settings to control the top/bottom padding, so we might consider adding the same set of settings for notebook.

A few pixel less between the outputs.

We might want to check the default padding we use for outputs cc @amunger

[john012343210]

@kolibril13 I like the screenshot you posted above very much. You did figure out the padding we added around those components, great work!

A few pixels less at the beginning of a cell.
A few pixels less at the ending of a cell.

We always add a few pixels around the cell editor. The text editor has settings to control the top/bottom padding, so we might consider adding the same set of settings for notebook.

A few pixel less between the outputs.

We might want to check the default padding we use for outputs cc @amunger

Any updates on these features?

[YubinXie]

I find switching this setting to hidden helps the most.

[starball5]

Historically related: #101366

[starball5]

Related on Stack Overflow: Is there a compact view for notebooks in VS code? Cells waste too much empty space

[caenrigen]

Hi all,

I put together a VSCode extension that, among other goals (unrelated to this issue), provides a command to configure the notebook layout to a compact mode by simply setting the corresponding users settings that already exist in VSCode (no new settings are added). After you install the extension it will suggest to apply the compact mode. You might find useful its other features: pairing notebooks via Jupytext and inserting/toggling notebook cells to raw "type".

If you want to give it a spin, you can grab it from the Marketplace or install the latest .vsix from the repo’s releases page:

• Marketplace: https://marketplace.visualstudio.com/items?itemName=caenrigen.jupytext-sync
  • Open VSX Registry https://open-vsx.org/extension/caenrigen/jupytext-sync
• Releases: https://github.com/caenrigen/vscode-jupytext-sync/releases

Feel free to try it out and let me know on the issue tracker if you hit any issues

[kolibril13]

Hi there! thanks for making this. just tested your extension, and the control somehow only creates the space on the left side of the cell, and not the space between the space. Is it also possible to control that space as well?

[caenrigen]

Hi there! thanks for making this. just tested your extension, and the control somehow only creates the space on the left side of the cell, and not the space between the space. Is it also possible to control that space as well?

@kolibril13 sorry if my initial comment was misleading

My extension just provides a shortcut to set some notebook.* configs (that were mentioned in this issue on how to use existing configurations) to make the layout more compact. Sadly my extension does not provide new configuration options affecting the notebook layout.

The "Compact View" is a notebook setting that already exists and sadly it does not reduce the spacing 🥲