Modern UI (Compact Density): Extra gaps between status bar item hover areas
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
Type: Bug
## Description
When Modern UI is enabled and the layout density is set to Compact, extra gaps appear between the hover areas of status bar items that contain multiple hoverable areas.
For the same reason, the hover areas of status bar items with a background color do not align with their background areas.
VS Code version: Code - Insiders 1.137.0-insider (94b021b519e8e3e99777a1ff72c77e32e0d4b1d3, 2026-09-07T01:46:17Z)
OS version: Windows_NT x64 10.0.26200
Modes:
System Info
|Item|Value|
|---|---|
|CPUs|12th Gen Intel(R) Core(TM) i9-12900 (24 x 2419)|
|GPU Status|2d_canvas: enabled
GPU0: VENDOR= 0x10de, DEVICE=0x2504 [NVIDIA GeForce RTX 3060], DRIVER_VENDOR=NVIDIA, DRIVER_VERSION=32.0.15.9186 *ACTIVE*
GPU1: VENDOR= 0x1414, DEVICE=0x008c [Microsoft Basic Render Driver], DRIVER_VERSION=10.0.26100.8972
Machine model name:
Machine model version:
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
trees_in_viz: disabled_off
video_decode: enabled
video_encode: enabled
webgl: enabled
webgpu: enabled
webnn: disabled_off|
|Load (avg)|undefined|
|Memory (System)|63.75GB (49.97GB free)|
|Process Argv|--crash-reporter-id e97790c8-c974-448f-8594-f9c890b4659d|
|Screen Reader|no|
|VM|0%|
Extensions: none
A/B Experiments
```
vsliv368cf:30146710
pythonvspyt551cf:31249598
nativeloc1:31118317
dwcopilot:31158714
dwoutputs:31242946
copilot_t_ci:31333650
g012b348:31231168
pythonrdcb7:31268811
pythonpcpt1:31399616
6518g693:31302842
envsactivate1:31349248
editstats-enabled:31346256
cloudbuttont:31366566
3efgi100_wstrepl:31403338
ddidtcf:31398485
cp_cls_t_966_ss:31526232
4je02754:31455664
c3h7c220:31478652
cp_cls_c_1081:31454833
conptydll_true:31485575
e9c30283:31453065
46204921:31447328
ei9d7968:31462942
hhf17803:31462392
h08i8180:31475367
ec1eg703:31520046
ddid_c:31478205
hmra_i5g22:31518061
bjc72774_agent_sandbox:31538428
7df3h592:31491241
cp_cls_t_1082:31535311
logging_enabled_new:31490725
jb_cp_cls_t_632:31543129
32d76977:31503652
ha629193:31508444
a1ije391_t:31533808
jbcp_cls_pctr_t:31531130
cp_intellij_t_nes:31548657
jf4hg949:31526829
hide-eh-duplicates:31543293
replace-eh-with-ah:31545853
hjji5903:31534458
enable_editor_pane_layout:31551200
52258b4d:31547953
36h42362:31560305
c7c27ce7:31551212
1h923230:31564177
1532g621_copy:31554310
treatment-23-1:31555779
unuse_dynamic_mcp:31555281
0c1h4866:31562347
vrbsty_fls:31561057
5b8j3302:31564600
mangle-name-treatment:31568054
allow-signed-out:31574470
codex-agent-enabled:31566739
64a8d082:31573709
issue8950-e3349a92:31574958
39a5d156:31574988
ae8b2313:-9
2bfb8b39:31576696
```
## Reproduction
1. Enable Modern UI.
2. Set Layout Density to Compact.
## Expected Behavior
- Adjacent hover areas should not have unintended gaps.
- A status bar item's hover area should align with its background area.
## Cause
Status bar item labels on the adjacent side have no margin. Status bar item labels with a background color also have their margins removed.
`src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css`:
```css
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.compact-left > .statusbar-item-label {
margin-left: 0;
margin-right: 5px; /* +2px because padding is smaller and we want to preserve spacing between items */
padding: 0 3px;
}
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.compact-right > .statusbar-item-label {
margin-left: 5px; /* +2px because padding is smaller and we want to preserve spacing between items */
margin-right: 0;
padding: 0 3px;
}
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-background-color > .statusbar-item-label {
margin-left: 0; /* Reduce margin to let element attach to the corners */
margin-right: 0;
padding-left: 8px; /* But increase padding to preserve our usual spacing */
padding-right: 8px;
}
```
However, Modern UI overrides the margins with a rule of the same specificity when Compact layout density is enabled.
As a result, the margins removed by the default styles are applied again, causing extra gaps and background misalignment.
`src/vs/workbench/contrib/modernUI/browser/media/statusBar.css`:
```css
.modern-ui.modern-ui-compact .part.statusbar > .items-container > .statusbar-item > .statusbar-item-label {
margin-left: var(--vscode-spacing-size20);
margin-right: var(--vscode-spacing-size20);
padding-left: var(--vscode-spacing-size40);
padding-right: var(--vscode-spacing-size40);
}
```
Contributor guide
Assessment
This issue has not been assessed yet.