Repository navigation
sessions: consolidate tab spacing and wrapped editor controls - #341337
Merged
Cherry Wang (chryw) merged 2 commits intoOct 13, 2026
Merged
Conversation
Restore the latest chat and detail-tab visuals from #340823, combine editor toolbars and final-row reservations from #340834, and retain the wrapped-cap contour from #340835. Preserve fit-label truncation, fixed-tab scrolling, RTL and high-contrast behavior, with production regression coverage and ready-state fixtures. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This was referenced Oct 13, 2026
Contributor
Screenshot ChangesBase: Changed (67)Added (7) |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The wrapped Add control loses the positioning context required by its absolute rounded backing.
1 open finding
What changed in this PR
Consolidates Agents window tab spacing and wrapped editor-control layout fixes across shared editor and Sessions UI.
Changes:
- Unifies Add Tab and editor toolbar positioning during wrapping.
- Refines Connected/Pill spacing, clipping, RTL, and high-contrast behavior.
- Adds extensive layout, fixture, and visual regression coverage.
| File | Description |
|---|---|
test/componentFixtures/playwright/tests/editorTabBar.spec.ts |
Updates visual geometry expectations. |
src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts |
Expands tab layout regressions. |
src/vs/workbench/test/browser/parts/editor/editor.test.ts |
Tests inset title separators. |
src/vs/workbench/test/browser/componentFixtures/sessions/chatCompositeBar.fixture.ts |
Updates chat fixtures. |
src/vs/workbench/test/browser/componentFixtures/editor/tabs.fixture.ts |
Supports fixture menu actions and backgrounds. |
src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts |
Updates Modern UI geometry tests. |
src/vs/workbench/contrib/modernUI/browser/media/tabs.css |
Revises tab spacing, wrapping, and labels. |
src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css |
Refines Connected geometry and Add styling. |
src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts |
Consolidates toolbar and wrapping calculations. |
src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css |
Groups and positions editor toolbars. |
src/vs/workbench/browser/parts/editor/media/editorgroupview.css |
Makes separator width configurable. |
src/vs/workbench/browser/parts/editor/editorTabsControl.ts |
Relayouts when action visibility changes. |
src/vs/workbench/browser/parts/editor/editorGroupView.ts |
Applies inset-aware header styling. |
src/vs/sessions/test/browser/editorPart.test.ts |
Tests Agents editor geometry. |
src/vs/sessions/test/browser/chatCompositeBar.test.ts |
Expands spacing and RTL clipping tests. |
src/vs/sessions/contrib/editor/test/browser/editorTabsLayout.test.ts |
Adds wrapped-control layout coverage. |
src/vs/sessions/contrib/editor/test/browser/editorHeader.fixture.ts |
Adds wrapped header fixtures. |
src/vs/sessions/contrib/editor/test/browser/editor.contribution.test.ts |
Updates toolbar DOM expectations. |
src/vs/sessions/contrib/chat/test/browser/sessionsGrid.fixture.ts |
Adds RTL session-grid fixtures. |
src/vs/sessions/browser/parts/media/editorPart.css |
Aligns Agents tab rows and toolbars. |
src/vs/sessions/browser/parts/media/chatCompositeBar.css |
Refines chat spacing and RTL contours. |
src/vs/sessions/browser/parts/editorParts.ts |
Restores configured action reservation. |
src/vs/sessions/browser/parts/chatCompositeBar.ts |
Tracks action spacing and clipping state. |
build/lib/stylelint/vscode-known-variables.json |
Registers new CSS custom properties. |
🧠 Review effort: Balanced
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Keep wrapped Add Tab in flex flow while anchoring its rounded backing in a local stacking context. Use positioned actionability-checked clicks for editor-focus automation so lingering terminal Close hovers cannot intercept the settings-editor click. Preserve the line-start position and cover backing bounds and the hover transition. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: Benjamin Christopher Simmonds (@benibenj)Matched files:
|
roblourens
approved these changes
Oct 13, 2026
|
Vào Thứ 4, 14 thg 10, 2026 vào lúc 02:20 roblourens <
***@***.***> đã viết:
… ***@***.**** approved this pull request.
—
Reply to this email directly, view it on GitHub
<#341337?email_source=notifications&email_token=CQEGW3H6NUZZC2AFNPUDNAD5TZ6AXA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTKNJQHA3DMMRRGYYKM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#pullrequestreview-5508662160>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/CQEGW3BQ3AOJ7PFKDIWAAVT5TZ6AXAVCNFSNUABEKJSXA33TNF2G64TZHM2DCOBYGE4TAMB3JFZXG5LFHM2TQMZUGY4DCMBQGGQXMAQ>
.
Triage notifications, keep track of coding agent tasks and review pull
requests on the go with GitHub Mobile for iOS
<https://github.com/notifications/mobile/ios/CQEGW3DKZC4M7KT7BFB2FQT5TZ6AXA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTKNJQHA3DMMRRGYYKM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSVGM33PORSXEX3JN5ZQ>
and Android
<https://github.com/notifications/mobile/android/CQEGW3GE2CMXLT2W73F5BFL5TZ6AXA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTKNJQHA3DMMRRGYYKM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSXGM33PORSXEX3BNZSHE33JMQ>.
Download it today!
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Cherry Wang (chryw)
deleted the
dev/cherwan/agents/consolidate-tab-related-prs
branch
October 13, 2026 20:03
This was referenced Oct 14, 2026
Closed
This was referenced Oct 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Restore balanced chat and detail-tab spacing, and keep Add Tab and editor actions visible and separate when tabs wrap.
Consolidates #340823, #340834, and #340835 into one reviewable change:
This PR includes all three tab-related scopes, plus the wrapped Add backing correction and smoke-test focus repair. No separate predecessor PR needs to land.
Fixes #336471 and #336898. Follow-up to #340635. Related: #331234 and #339782.
Changes
Testing
Reviewer setup
Use a Code OSS build from this PR, not installed Stable or Insiders. The local setup used for validation is macOS desktop, Modern UI, Connected tabs, and fixed-width editor tabs. If you rebuild the running checkout with
npm run build-fast, use Developer: Reload Window before testing so the window loads the updated sources.Test both the regular editor window and the Agents window's editor/detail side pane. Open Preferences: Open User Settings (JSON) in the window you are testing; alternatively, search Settings with
@id:<setting ID>. Check for workspace overrides if a user-setting change appears to have no effect. Most tab options requireworkbench.editor.showTabs: "multiple".For the same six-file layout used in the native OSS check, open these files from the checkout:
In the regular window, use View: Split Editor Right and drag the group sash to create a narrow tab strip. In the Agents window, resize the editor/detail side pane with its sash; its main editor does not support multiple editor groups.
Start with this repeatable configuration, then change one option at a time:
{ "workbench.experimental.modernUI": true, "workbench.experimental.modernUIEditorTabStyle": "connected", "window.density.layout": "default", "window.density.editorTabHeight": "default", "workbench.editor.showTabs": "multiple", "workbench.editor.wrapTabs": true, "workbench.editor.tabSizing": "fixed", "workbench.editor.tabSizingFixedMinWidth": 120, "workbench.editor.tabSizingFixedMaxWidth": 120, "workbench.editor.tabActionReserveSpace": false, "workbench.editor.tabActionLocation": "right", "workbench.editor.pinnedTabSizing": "normal", "workbench.editor.pinnedTabsOnSeparateRow": false }In the Agents window, also set
"sessions.showChatTabs": "multiple"when comparing chat tabs. Use an existing session with at least two visible chats so the chat strip appears. Editor-tab wrapping and sizing settings apply to file/detail tabs; chat tabs are a separate strip, not another wrapped editor row.Settings to vary
workbench.experimental.modernUItrue, thenfalseworkbench.experimental.modernUIEditorTabStyle"connected","pill"window.density.layout"default","compact"window.density.editorTabHeight"default","compact"workbench.editor.wrapTabstrue,falseworkbench.editor.tabSizing"fit","shrink","fixed"workbench.editor.tabSizingFixedMinWidth120; then wider than the paneworkbench.editor.tabSizingFixedMaxWidth120for deterministic wrapping; change both for oversized tabs.workbench.editor.tabActionReserveSpacefalse,trueworkbench.editor.tabActionLocation"right","left"workbench.editor.pinnedTabsOnSeparateRowfalse,trueworkbench.editor.pinnedTabSizing"normal","compact","shrink"workbench.editor.tabActionCloseVisibilitytrue,falseworkbench.editor.tabActionUnpinVisibilitytrue,falseworkbench.editor.highlightModifiedTabsfalse,trueworkbench.editor.showTabs"multiple"; then"single"/"none"sessions.showChatTabs"multiple","single"Use
window.density.editorTabHeight, not the olderworkbench.editor.tabHeightname. To keep contextual/layout actions available in the regular editor window, leaveworkbench.editor.editorActionsLocationat"default"; that setting is fixed to"default"in the Agents window.Manual scenarios and expected results
120widths, narrow the regular editor group or Agents side pane until tabs wrap. Select tabs on the upper and bottom rows. Add Tab (in the Agents pane), contextual actions, the separator, and layout actions must have separate visible hit targets. The rounded Add backing must stay behind its button, not span the header. Resize/maximize and restore; controls must not disappear or overlap tabs."fit","shrink", and"fixed"with reservation on/off. Hover an inactive clean tab, select it, and keyboard-focus Close/Unpin. Tab widths must remain stable and the label must ellipsize before the action rather than paint underneath it. Check short labels, file icons, decorated filenames, and unsaved/dirty tabs. Repeat with actions on the left. Modern fit labels should wrap/ellipsize; if a fixed tab's minimum width exceeds the pane, wrapping should give way to horizontal scrolling and the active tab should remain reachable.workbench.editor.pinnedTabsOnSeparateRow; repeat with eachpinnedTabSizingvalue and both tab heights. Pinned tabs should occupy the upper bar, with contextual/layout toolbars only on the lower bar. Wrapped upper tabs remain pills; the eligible active bottom tab connects to the editor in Connected style. Unpin all files and confirm the empty upper bar disappears without leaving an incorrect header gap.sessions.showChatTabsto"single"as a negative case; do not expect the editor wrapping/sizing controls to create a chat-tab row.Local validation passed: full Code OSS build and client type-check; focused editor/chat tests; affected wrapped-Add bounds and stacking regressions; changed-file ESLint and CSS lint; local fixture rendering and remount checks; and native OSS single-row/wrapped-pane geometry and keyboard-focus checks.
npm run smoketest -- -g 'Terminal Editors' --tracingandnpm run smoketest-no-compile -- -g 'Terminal Editors' --tracingpassed on macOS, including the explicit terminal Close-hover setup.The Windows failure trace showed a lingering Close tooltip intercepting the smoke driver's raw settings-editor click. A browser reproduction verified the old interception and the repaired click's focus and line-start position. Windows / Electron-Smoke now passes on the repaired commit. The separate duplicate Copilot provider failures from the earlier combined revert remain outside this tab consolidation.