Modern UI compact density
- 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
Assessment
This issue has not been assessed yet.