microsoft / microsoft/vscode

Modern UI compact density

Open
#332,001 5 comments 8 reactions 2 assignees Claimed by @hawkticehurst View on GitHub
modernization ux
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

The Modern UI introduces more spacing, rounded corners, and visual separation between workbench parts. While this creates a more distinct surface hierarchy, feedback indicates that it can also reduce the space available for code and make dense layouts feel fragmented—particularly when the editor, side bars, and panel are all visible.

Rather than requiring users to choose between enabling or disabling Modern UI, we should investigate a supported way to adjust its overall density.

## Goals

- Reclaim usable editor space by reducing gaps and padding.
- Provide a denser, more integrated appearance for adjacent workbench parts.
- Preserve the usability and accessibility of interactive targets such as sashes, tabs, and actions.
- Keep the current Modern UI appearance as the default while allowing users to opt into a compact layout.

## Areas to investigate

- A simple workbench density setting, such as:
- **Compact**
- **Default**
- **Comfortable**
- Whether advanced controls are needed for individual properties or workbench parts, including:
- gaps between the editor, side bars, and panel;
- internal padding;
- corner radius;
- borders and separators;
- tab and title-area height;
- status bar height.
- Whether compact density should allow adjacent workbench parts to appear flush—or nearly flush—to reduce the "floating card" effect.
- How density settings behave across different panel positions, multiple editor groups, window sizes, zoom levels, and accessibility configurations.

A successful compact configuration should noticeably increase the space available for editing without reducing essential interaction areas or requiring users to disable Modern UI entirely.

## Related feedback

- [Preserve option to keep current UI](https://github.com/microsoft/vscode/issues/326146)
- [Revert Modern UI update](https://github.com/microsoft/vscode/issues/326328)
- [Suggestion to maximize editing area space](https://github.com/microsoft/vscode/issues/328197)
- [Modern UI workbench styling feels visually noisy and less usable](https://github.com/microsoft/vscode/issues/329024)
- [Modern UI density configuration request](https://github.com/microsoft/vscode-remote-release/issues/11801)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.