Skip to content

Modern UI: Prevent vertical scrolling when dragging connected tabs - #336879

Open
na2co3 (na2co3-ftw) wants to merge 3 commits into
microsoft:mainfrom
na2co3-ftw:fix/modern-ui-connected-tab-vertical-scroll
Open

Modern UI: Prevent vertical scrolling when dragging connected tabs#336879
na2co3 (na2co3-ftw) wants to merge 3 commits into
microsoft:mainfrom
na2co3-ftw:fix/modern-ui-connected-tab-vertical-scroll

Conversation

@na2co3-ftw

@na2co3-ftw na2co3 (na2co3-ftw) commented Sep 19, 2026

Copy link
Copy Markdown

Problem

In Modern UI with conected tabs, dragging a tab can cause the tab strip to scroll vertically.

2026-09-19.13-15-17.mp4

Cause

The active tab's tab-fill and tab-connected-edge elements extend vertically beyond the tabs-container.

--modern-ui-connected-tab-gutter already includes the bottom border thickness, but both elements were positioned using the gutter plus one additional stroke thickness.

When workbench.editor.wrapTabs and workbench.editor.pinnedTabsOnSeparateRow are enabled, the gutter value did not match the transparent border width of the tab.

Fix

  • Align the bottom of tab-fill and tab-connected-edge with --modern-ui-connected-tab-gutter.
  • Adjust the child positioning of tab-connected-overflow-edge for the new height.
  • Correct the gutter value for wrapped tabs in the separate pinned-tab row layout.

Copilot AI balanced review requested due to automatic review settings September 19, 2026 09:32
Copilot AI reviewed Sep 19, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

The combined wrapped-tabs and separate-pinned-row regression path lacks direct coverage.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 1 Medium severity

Open (1)
What changed in this PR

Aligns connected-tab geometry to prevent vertical scrolling during tab drag.

Changes:

  • Aligns connected fills and edges with the tab-strip gutter.
  • Corrects overflow-edge positioning and wrapped pinned-row gutter handling.
  • Updates geometry assertions.
File Description
connectedEditorTabs.css Corrects connected-tab bounds and gutter behavior.
multiEditorTabsControl.test.ts Updates CSS geometry expectations.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css
}

.modern-ui.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs.two-tab-bars > .tabs-and-actions-container:not(:first-child) {
.modern-ui.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs.two-tab-bars > .tabs-and-actions-container:not(.wrapping):not(:first-child) {

@na2co3-ftw na2co3 (na2co3-ftw) Sep 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a test.

@na2co3-ftw
na2co3 (na2co3-ftw) requested a balanced review from Copilot September 19, 2026 11:13
Copilot AI reviewed Sep 19, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟢 Approval recommended

The focused CSS correction is covered by targeted single-row and multi-row browser tests.

Review effort: Balanced
Findings: 1 Medium severity · 1 Low severity

Open (2)

Comment thread src/vs/workbench/test/browser/parts/editor/multiRowEditorTabsControl.test.ts Outdated
@na2co3-ftw
Clarify comment on disposing modifier-key emitter
3d7f67c 
Updated comment to clarify the purpose of disposing the modifier-key emitter.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@saitanallensantiago26-beep

Allen Bacabis Santiago (saitanallensantiago26-beep) commented Sep 19, 2026

Copy link
Copy Markdown

Problem

In Modern UI with conected tabs, dragging a tab can cause the tab strip to scroll vertically.

2026-09-19.13-15-17.mp4

Cause

The active tab's tab-fill and tab-connected-edge elements extend vertically beyond the tabs-container.

--modern-ui-connected-tab-gutter already includes the bottom border thickness, but both elements were positioned using the gutter plus one additional stroke thickness.

When workbench.editor.wrapTabs and workbench.editor.pinnedTabsOnSeparateRow are enabled, the gutter value did not match the transparent border width of the tab.

Fix

  • Align the bottom of tab-fill and tab-connected-edge with --modern-ui-connected-tab-gutter.
  • Adjust the child positioning of tab-connected-overflow-edge for the new height.
  • Correct the gutter value for wrapped tabs in the separate pinned-tab row layout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Balanced
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@mrleemurray Lee Murray (mrleemurray)

@hawkticehurst Hawk Ticehurst (hawkticehurst)

Labels

modernization

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@na2co3-ftw @saitanallensantiago26-beep @mrleemurray @hawkticehurst @benibenj