Skip to content

sessions: consolidate tab spacing and wrapped editor controls - #341337

Merged
Cherry Wang (chryw) merged 2 commits into
mainfrom
dev/cherwan/agents/consolidate-tab-related-prs
Oct 13, 2026
Merged

Cherry Wang (chryw) merged 2 commits into
mainfrom
dev/cherwan/agents/consolidate-tab-related-prs

Conversation

@chryw

@chryw Cherry Wang (chryw) commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

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.

Image

Changes

  • Balance chat, detail, and editor-tab spacing, Connected curves, header heights, and hover boundaries.
  • Give contextual and layout toolbars one positioning and measurement owner. Reserve their trailing region on the final visible item, including Add Tab.
  • Use Add Tab's actual final row for Connected styling. A controls-only final row leaves the editor tabs above as freestanding pills.
  • Anchor the wrapped Add button's rounded backing to the button in its own stacking context, without taking it out of flex flow.
  • Preserve stable tab widths, readable short labels, ellipsis, file icons, action-space reservation, separate pinned rows, RTL, and high-contrast focus. Modern UI fit labels wrap and ellipsize; oversized fixed or legacy tabs retain horizontal scrolling.
  • Await complete wrapped layouts in header fixtures. Harden smoke-test editor focus against lingering tab hovers with an actionability-checked click that preserves the line-start position.

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 require workbench.editor.showTabs: "multiple".

For the same six-file layout used in the native OSS check, open these files from the checkout:

src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
src/vs/workbench/browser/parts/editor/editorTabsControl.ts
src/vs/workbench/contrib/modernUI/browser/media/tabs.css
src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css
src/vs/sessions/browser/parts/media/editorPart.css
src/vs/sessions/browser/parts/chatCompositeBar.ts

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

Setting ID Values to check What it exercises
workbench.experimental.modernUI true, then false Modern styles, then legacy editor-window behavior as a negative case.
workbench.experimental.modernUIEditorTabStyle "connected", "pill" Connected caps/shoulders versus freestanding pills; also affects Agents chat tabs.
window.density.layout "default", "compact" Workbench/Agents layout spacing. This is independent of editor-tab height.
window.density.editorTabHeight "default", "compact" Tab-row height, action alignment, and Agents chat/detail header alignment.
workbench.editor.wrapTabs true, false Wrapped rows versus a horizontally scrolling strip.
workbench.editor.tabSizing "fit", "shrink", "fixed" Intrinsic labels, compressed tabs, and controlled equal-width tabs.
workbench.editor.tabSizingFixedMinWidth 120; then wider than the pane Minimum fixed width; an oversized fixed tab must fall back to horizontal scrolling.
workbench.editor.tabSizingFixedMaxWidth Match the minimum for this test Set both widths to 120 for deterministic wrapping; change both for oversized tabs.
workbench.editor.tabActionReserveSpace false, true Transient Close space versus a permanently reserved action column.
workbench.editor.tabActionLocation "right", "left" Close/Unpin placement, readable labels, and stable hover/focus widths.
workbench.editor.pinnedTabsOnSeparateRow false, true Pinned upper bar versus ordinary lower bar and their toolbar reservations.
workbench.editor.pinnedTabSizing "normal", "compact", "shrink" Full labels, icon-only pinned tabs, and shortened pinned labels.
workbench.editor.tabActionCloseVisibility true, false Close-visible and Close-hidden tab spacing.
workbench.editor.tabActionUnpinVisibility true, false Persistent pinned/Unpin action spacing.
workbench.editor.highlightModifiedTabs false, true Dirty indicators/top accent without changing tab geometry.
workbench.editor.showTabs "multiple"; then "single"/"none" Main multi-tab scenarios, then single/no-tab header regressions.
sessions.showChatTabs "multiple", "single" Agents chat-tab presentation versus the single-chat presentation.

Use window.density.editorTabHeight, not the older workbench.editor.tabHeight name. To keep contextual/layout actions available in the regular editor window, leave workbench.editor.editorActionsLocation at "default"; that setting is fixed to "default" in the Agents window.

Manual scenarios and expected results

  1. Wrapped controls and resize: open six or more files, including short names, long names, and duplicate basenames in different folders. Double-click preview tabs to keep the files open. With the baseline fixed 120 widths, 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.
  2. Controls-only final row: narrow the Agents side pane until Add Tab and the toolbars are the only items on the bottom row. Select the last file tab above them. In Connected style, all file tabs above this controls-only row must be freestanding pills; no active cap should extend across the controls row.
  3. Labels and action reservation: compare "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.
  4. Pinned rows: use the tab context menu's Pin action on two files, leaving several ordinary tabs open. Keeping a preview file open is not the same as pinning it. Turn on workbench.editor.pinnedTabsOnSeparateRow; repeat with each pinnedTabSizing value 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.
  5. Style, density, and themes: repeat the main wrapped and nonwrapped cases in Connected and Pill styles. Independently vary layout density and tab height; compact layout does not imply compact tabs. Compare Dark 2026, Light 2026, Dark High Contrast, and Light High Contrast with Preferences: Color Theme. Selected tabs, hover boundaries, keyboard focus, and dirty indicators must remain distinguishable. In the regular editor window, turn Modern UI off to check that legacy behavior is unchanged. Where an RTL build/setup is available, repeat the action placement and terminal-tab scrolling checks.
  6. Agents chat/detail consistency: in an existing multi-chat session, switch between the main chat and a related chat; compare their labels, Close actions, and rounded boundaries with the file/detail tabs. Resize or maximize the side pane and check that the card boundary stays continuous, with no extra gutter or clipped terminal shoulder. Switch sessions.showChatTabs to "single" as a negative case; do not expect the editor wrapping/sizing controls to create a chat-tab row.
  7. Terminal/settings focus: run Terminal: Create New Terminal in Editor Area, hover the terminal tab's Close action until its tooltip appears, then run Preferences: Open User Settings (JSON). Confirm the settings editor is usable and receives editor focus when selected. The automated Terminal Editors scenario below explicitly exercises this hover setup and must not click the lingering tooltip instead of the editor.

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' --tracing and npm run smoketest-no-compile -- -g 'Terminal Editors' --tracing passed 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.

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>
@github-actions

github-actions Bot commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: 6ba04a11 Current: 74615d25

Changed (67)

sessions/grid/sessionsGrid/SidePanelGap/Light
Before After
before after
sessions/grid/sessionsGrid/PillSidePanelGap/Light
Before After
before after
sessions/grid/sessionsGrid/ConnectedSingleTabSidePanelGap/Light
Before After
before after
sessions/grid/sessionsGrid/JustifiedPillSideAndBottomPanelGap/Light
Before After
before after
sessions/grid/sessionsGrid/MultipleChats/Light
Before After
before after
sessions/grid/sessionsGrid/RelatedChats/Light
Before After
before after
sessions/grid/sessionsGrid/MixedRelatedChats/Light
Before After
before after
sessions/grid/sessionsGrid/PillChatTabs/Light
Before After
before after
sessions/grid/sessionsGrid/NestedChatGroups/Light
Before After
before after
sessions/editorHeader/editorHeader/ConnectedChangesCard/Light
Before After
before after
sessions/editorHeader/editorHeader/CompactLayoutChangesCard/Light
Before After
before after
sessions/editorHeader/editorHeader/CompactLayoutSecondTabCard/Light
Before After
before after
sessions/editorHeader/editorHeader/ConnectedSecondTabCard/Light
Before After
before after
sessions/editorHeader/editorHeader/FullHeader/Light
Before After
before after
sessions/editorHeader/editorHeader/CompactFullHeader/Light
Before After
before after
sessions/editorHeader/editorHeader/BreadcrumbsAndAction/Light
Before After
before after
sessions/editorHeader/editorHeader/BreadcrumbsAndSecondaryAction/Light
Before After
before after
sessions/editorHeader/editorHeader/BreadcrumbsOnly/Light
Before After
before after
sessions/editorHeader/editorHeader/PrimaryActionOnly/Light
Before After
before after
sessions/editorHeader/editorHeader/SecondaryActionOnly/Light
Before After
before after
sessions/editorHeader/editorHeader/LayoutActionsOnly/Light
Before After
before after
sessions/editorHeader/editorHeader/SingleTabFullHeader/Light
Before After
before after
sessions/editorHeader/editorHeader/SingleTabCompactFullHeader/Light
Before After
before after
sessions/editorHeader/editorHeader/SingleTabDockedHeader/Light
Before After
before after
sessions/editorHeader/editorHeader/SingleTabCompactDockedHeader/Light
Before After
before after
sessions/editorHeader/editorHeader/SingleTabEmptyFiles/Light
Before After
before after
sessions/editorHeader/editorHeader/SingleTabCompactEmptyFiles/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_OneApproval/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_TwoApprovals/Light
Before After
before after
sessions/blockedSessionsList/BlockedSessionsList_FiveApprovals/Light
Before After
before after
sessions/chatCompositeBar/StickyMessageFrame/Light
Before After
before after
sessions/chatCompositeBar/StickyMessageFrameNarrow/Light
Before After
before after
sessions/chatCompositeBar/FirstChatActive/Light
Before After
before after
sessions/chatCompositeBar/TwoChats/Light
Before After
before after
sessions/chatCompositeBar/MixedStatuses/Light
Before After
before after
sessions/chatCompositeBar/LongTitles/Light
Before After
before after
sessions/chatCompositeBar/Renaming/Light
Before After
before after
sessions/chatCompositeBar/WithDraftChat/Light
Before After
before after
sessions/chatCompositeBar/CompactTabs/Light
Before After
before after
sessions/chatCompositeBar/InactiveSession/Light
Before After
before after
sessions/chatCompositeBar/OverflowingTabs/Light
Before After
before after
sessions/chatCompositeBar/PillTabs/Light
Before After
before after
editor/tabs/Density/Compact/AcrossTabStyles/Light
Before After
before after
editor/tabs/Density/Compact/SingleRow/Light
Before After
before after
editor/tabs/Density/Compact/SingleTab/Light
Before After
before after
editor/tabs/Density/Compact/WrappedBottomActive/Light
Before After
before after
editor/tabs/Density/Compact/WrappedUpperActive/Light
Before After
before after
editor/tabs/Density/Default/AcrossTabStyles/Light
Before After
before after
editor/tabs/Density/Default/SingleRow/Light
Before After
before after
editor/tabs/Density/Default/SingleTab/Light
Before After
before after
editor/tabs/Density/Default/WrappedBottomActive/Light
Before After
before after
editor/tabs/Density/Default/WrappedUpperActive/Light
Before After
before after
editor/tabs/Layout/ActionsHidden/Light
Before After
before after
editor/tabs/Layout/ActionsOnLeft/Light
Before After
before after
editor/tabs/Layout/ActionsUnreserved/Light
Before After
before after
editor/tabs/Layout/FileIconsMinimal/Light
Before After
before after
editor/tabs/Layout/FileIconsModernWelcome/Light
Before After
before after
editor/tabs/Layout/FileIconsNone/Light
Before After
before after
editor/tabs/Layout/LongNamesFit/Light
Before After
before after
editor/tabs/Layout/LongNamesFixed/Light
Before After
before after
editor/tabs/Layout/LongNamesShrink/Light
Before After
before after
editor/tabs/Layout/ModifiedAndMultiSelected/Light
Before After
before after
editor/tabs/Layout/PinnedIconOnly/Light
Before After
before after
editor/tabs/Layout/PinnedSeparateRow/Light
Before After
before after
editor/tabs/Layout/ShowBreadCrumbs/Light
Before After
before after
editor/tabs/Styles/Connected/Light
Before After
before after
editor/tabs/Styles/Pill/Light
Before After
before after

Added (7)

sessions/grid/sessionsGrid/SidePanelGapRtl/Light

current

sessions/grid/sessionsGrid/SidePanelGapRtlNoFileIcons/Light

current

sessions/grid/sessionsGrid/RelatedChatsRtl/Light

current

sessions/editorHeader/editorHeader/WrappedEditorActions/Light

current

sessions/editorHeader/editorHeader/CompactWrappedEditorActions/Light

current

sessions/editorHeader/editorHeader/PinnedWrappedEditorActions/Light

current

sessions/editorHeader/editorHeader/ControlsOnlyLastRow/Light

current

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.

🟡 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>
@vs-code-engineering

Copy link
Copy Markdown
Contributor

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

Benjamin Christopher Simmonds (@benibenj)

Matched files:

  • src/vs/sessions/browser/parts/chatCompositeBar.ts
  • src/vs/sessions/browser/parts/editorParts.ts
  • src/vs/sessions/browser/parts/media/chatCompositeBar.css
  • src/vs/sessions/browser/parts/media/editorPart.css
  • src/vs/workbench/browser/parts/editor/editorGroupView.ts
  • src/vs/workbench/browser/parts/editor/editorTabsControl.ts
  • src/vs/workbench/browser/parts/editor/media/editorgroupview.css
  • src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
  • src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts

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.

🔵 Needs a closer look

The cross-cutting geometry, RTL, scrolling, and automation changes warrant final human visual review despite extensive regression coverage.

0 open findings

1 resolved since last review

🧠 Review effort: Balanced

@phanh567e1-hash

phanh567e1-hash commented Oct 13, 2026 via email

Copy link
Copy Markdown

@chryw
Cherry Wang (chryw) merged commit 510fe67 into main Oct 13, 2026
36 checks passed
@chryw
Cherry Wang (chryw) deleted the dev/cherwan/agents/consolidate-tab-related-prs branch October 13, 2026 20:03
@vs-code-engineering vs-code-engineering Bot added this to the 1.143.0 milestone Oct 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Off-center tabs in agents window

4 participants