microsoft / microsoft/vscode

`"window.density.layout": "compact"` does not make horizontal window spacing compact in modern UI

Open
#336,423 2 comments 2 reactions 1 assignee Claimed by @ulugbekna View on GitHub
modernization
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

Does this issue occur when all extensions are disabled?: Yes

- VS Code Version: 1.138.0
- OS Version: Windows 11

The modern UI (the upcoming default) still uses too much horizontal space, even in compact mode. As per https://github.com/microsoft/vscode/issues/334285#issue-5338531166, I'm creating this issue to give feedback.

I have set up VS Code such that I can have two code editors with 120 characters width horizontally side by side on my 2560 x 1440 screen (with 125% DPI scaling), assuming both files have under 1000 lines of code (relevant due to line number column width), which basically all my code files do (or else I refactor them).

With `"workbench.experimental.modernUI": true`, there is additional empty space at the left and right edges of the VS Code window that eat up one character of each of the two windows. Setting `"window.density.layout": "compact"` doesn't help.

While rounded corners etc. are a matter of taste, having less space than before even in a supposedly compact layout is a bug to me. Workarounds like decreasing the font size, decreasing the letter spacing, decreasing the minimap size, etc. are not sufficient solutions since they worsen readability and affect UX negatively.

**Steps to reproduce:**

1. Set up a 2560 x 1440 monitor with 125% DPI scaling.
2. Start VS Code and maximize the window.
3. Set these settings[^1]:

```json
{
"editor.folding": false,
"editor.fontFamily": "Cascadia Code",
"editor.fontSize": 12.9,
"editor.glyphMargin": false,
"editor.letterSpacing": -0.3,
"editor.minimap.maxColumn": 20,
"editor.rulers": [120],
"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 120,
"window.density.layout": "compact",
"window.zoomLevel": 0.5,
"workbench.activityBar.location": "top",
"workbench.experimental.modernUI": false,
}
```

3. Open two empty editors horizontally side-by-side.
4. Observe that in each editor, the 120-character ruler is visible.
5. Set `"workbench.experimental.modernUI": true`.

**Expected behavior:** Both 120-character rulers are still visible.

**Actual behavior:** Both 120-character rulers vanish as only 119 characters fit in every line of both editors.

**Image with old UI:**

Image

**Image with modern UI:**

Image

Note the empty space at the left edge (left to the line numbers) and the right edge of the window leading to the 120-character rulers not visible anymore.

[^1]: These settings might look very specific because they stem from my actual configuration. The issue that the modern UI uses too much horizontal spaces persists for other user scenarios and configurations as well.

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.