microsoft / microsoft/vscode

Agents Window: Editor action buttons overlap when tab wrapping is enabled

Open
#336,898 0 comments 0 reactions 1 assignee View on GitHub

@benibenj is already working on this.

Since Sep 20, 2026.

Dominant language
TypeScript
Stars
193k
Forks
42.7k
PR merge metrics
PR metrics pending

Description

Type: Bug

Description

When workbench.editor.wrapTabs is enabled in the Agents Window, the editor action buttons overlap each other and can also overlap with the Add Tab button.

Image

VS Code version: Code - Insiders 1.139.0-insider (289549a85cd652ce3513ac63044495a2ac620752, 2026-09-18T09:52:25-07:00)
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.9278
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 (39.04GB 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
ge8j1254_inline_auto_hint_haiku:31490507
cp_cls_c_1081:31454833
conptydll_true:31485575
e9c30283:31453065
c9b86496:31447327
ei9d7968:31462942
hhf17803:31462392
ec1eg703:31520046
ddid_c:31478205
hmra_i5g22:31518061
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
24a33675:31583069
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
treatment-23-1:31555779
unuse_dynamic_mcp:31555281
0c1h4866:31562347
5b8j3302:31564600
autotiers:31584973
mangle-name-treatment:31568054
allow-signed-out:31574470
codex-agent-enabled:31566739
intellij_nes_preview_t:31580086
64a8d082:31573709
fi319487:31574446
issue8950-e3349a92:31574958
39a5d156:31574988
ae8b2313:-9
2bfb8b39:31585911
accent:31581110
1cff76af:31580265
96d59efc:31580278
85d09606-suggestts7:31587098
links-treatment:31581067
7g328426_fixed:31583679
54hd3363:31585488
skill-budget-15000:31586215
permission_prompt_treatment:1332566
ccr_pr_nudge_auto_review:1319472
vsc_wsm_t:1324223
ce50c479:1394169
3aced641:1389836
sem_714gi995:1394171

Cause

When tab wrapping is enabled, both the .editor-actions element, which contains actions such as Add File as Context and More Actions, and the .editor-layout-actions element, which contains actions such as Maximize Editor Area and Toggle Details, are absolutely positioned at the bottom-right of the title area.

Because both elements are positioned at the same location, the action buttons contained in .editor-actions and .editor-layout-actions overlap each other.

src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css

.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .editor-actions {

	/* When tabs are wrapped, position the editor actions at the end of the very last row */
	position: absolute;
	bottom: 0;
	right: 0;
}

src/vs/sessions/browser/parts/media/editorPart.css

.agent-sessions-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .editor-layout-actions {
	/* When tabs are wrapped, position the trailing editor actions at the end of the very last row */
	position: absolute;
	bottom: 0;
	right: 0;
}

The existing rule reserves space by applying a margin to the last tab. However, when the Add Tab button is the last child, it is not matched by the .tab:last-child selector, so the margin is not applied to the Add Tab button.

As a result, the Add Tab button can also overlap the editor action buttons.

src/vs/workbench/contrib/modernUI/browser/media/tabs.css

.modern-ui-tabs .part.editor .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
	margin-right: calc(var(--last-tab-margin-right) + var(--vscode-spacing-size40)) !important;
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.