A "tight layout" mode that reduces vertical spacing

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):

from JupyterLab
from a Gist
from VS Code
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!

JupyterLab

Gist on GitHub

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

VSCode diff

related, but for IW: #156803

Jan-Hendrik Müller (@kolibril13)

Jan-Hendrik Müller (@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

Jan-Hendrik Müller (@kolibril13) do you wanna give the settings a try and see how they work for you?

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,

Peng Lyu (@rebornix)

Thanks Peng Lyu (@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.

Jan-Hendrik Müller (@kolibril13)

Jan-Hendrik Müller (@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 Aaron Munger (@amunger)

Jan-Hendrik Müller (@kolibril13)

Jan-Hendrik Müller (@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 Aaron Munger (@amunger)

Any updates on these features?

I find switching this setting to hidden helps the most.

Historically related: #101366

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

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

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?

Jan-Hendrik Müller (@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?

Jan-Hendrik Müller (@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 🥲

Each notebook code cell has a hardcoded 12px top padding inside the Monaco editor. For a single-line cell with editor.lineHeight: 16, the cell renders at 40px total — the 16px code line starts at top: 12px within a 40px overflow-guard. Almost 60% of the cell height is empty space.

none of these work:

"editor.padding.top": 0,
"editor.padding.bottom": 0,

"notebook.editorOptionsCustomizations": {
    "editor.padding.top": 0,
    "editor.padding.bottom": 0
}

"notebook.editorOptionsCustomizations": {
    "padding": { "top": 0, "bottom": 0 }
}

"notebook.cellTopMargin": 4,
"notebook.cellBottomMargin": 4,

Custom CSS injection doesn't work either — the .cell-inner-container, .cell-focus-indicator-top, and .cell-focus-indicator-bottom elements already have 0px padding/margin. The 12px is set inline by the Monaco layout engine on the .view-line elements and recalculated on every render, so CSS overrides get immediately clobbered.

I think editor.padding.top / editor.padding.bottom should be respected by notebook cell editors (either directly or via notebook.editorOptionsCustomizations). This would let users who want a compact layout opt in without changing the default for anyone else. A single "tight layout" toggle that reduces both the internal cell padding and the between-cell spacing would be even better.

This is a significant usability issue for data scientists working on laptops — the vertical space overhead per cell makes VS Code notebooks noticeably less information-dense than JupyterLab, exactly as the original screenshots demonstrate.

Navigation Menu

Repository navigation

A "tight layout" mode that reduces vertical spacing #175295

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

A "tight layout" mode that reduces vertical spacing #175295

Description

Activity

amunger commented on Feb 24, 2023

rebornix commented on Feb 24, 2023

rebornix commented on Feb 24, 2023

kolibril13 commented on Feb 24, 2023

rebornix commented on Feb 28, 2023

username7171 commented on Sep 4, 2023

YubinXie commented on Nov 3, 2023

starball5 commented on Mar 16, 2024

starball5 commented on Feb 19, 2025

caenrigen commented on May 6, 2025

kolibril13 commented on May 6, 2025

caenrigen commented on May 6, 2025

alexlenail commented on Feb 22, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions