sessions: balance chat and detail tab spacing by chryw · Pull Request #340823 · microsoft/vscode

Cherry Wang (chryw) · 2026-10-09T23:40:50Z

Balance label and Close-button spacing in Agents-window chat tabs, and keep detail-pane icon insets consistent without changing ordinary editor-tab geometry.

Follow-up to #340635. Fixes #336471. Related to #331234 and #339782; these broader spacing reports are non-closing references.

Changes

Separate standalone chat-tab padding from editor file-icon gutters. Use logical toolbar spacing and a compact trailing inset only when a chat has tab actions.
Give docked detail tabs their own leading icon inset, preserving the RTL file-icon gutter and excluding modal editors.
Preserve Connected RTL shoulders and aligned terminal outlines without an opaque cap covering labels. For an actually right-clipped tab, retain a stroke-only viewport boundary; distinguish real clipping from rounded clientWidth at fractional widths.
Use a border-based strip separator and cover RTL scrolling, terminal closing, tab rebuilding, and clipping-state disposal.

Testing

Enable Modern UI with Connected tabs. Open a main chat and related chats; compare their label and Close-button spacing in LTR and RTL.
With running chats, hover an inactive tab and its Close button, then switch the active chat. Check readable labels, compact trailing spacing, and unobstructed actions. Repeat with Pill tabs.
Overflow the Connected strip in RTL. Partially clip an active nonterminal tab at either viewport edge, then reveal and close the terminal chat. Check the visible outline, replacement shoulder, scroll clamping, and removal of stale clipping paint in regular and high-contrast themes.
Check aligned RTL tabs at fractional widths and zoom levels: alignment must not create an extra viewport stroke. Verify the docked Changes tab with file icons enabled and disabled.
Compare ordinary editor tabs, including compact, sticky, action-reservation, and high-contrast states, with the behavior from editor: refine Connected tab geometry and visual states #340635.

Local validation:

npm run build-fast -- --client-only — passed.
./scripts/test.sh --run src/vs/sessions/test/browser/chatCompositeBar.test.ts --run src/vs/workbench/test/browser/parts/editor/multiEditorTabsControl.test.ts --reporter dot — passed.
npm run typecheck-client — passed.
Changed-file ESLint and Stylelint — passed.
Headless component renders preserve exact same-platform editor image bytes against the clean base and chat/detail image bytes against the approved reference. Direct raster checks verify the visible high-contrast RTL viewport stroke.
Independent local code review and read-only Copilot CLI review completed; the RTL truncation finding is addressed.

Visual comparison

Matched dark-theme, running-chat scenes at the same viewport, zoom, and device scale; spinner animation is frozen. An inactive Close button is hovered.

Before:

After:

Corner-contour refinement and wrapped editor-action overlap are separate workstreams; this PR does not claim to resolve them.

Preserve editor icon gutters, logical chat action spacing, and Connected RTL outlines at aligned and genuinely clipped viewport edges. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions · 2026-10-09T23:45:33Z

Screenshot Changes

Base: 04861ffb Current: 931cf243

Changed (33)

sessions/grid/sessionsGrid/SidePanelGap/Light

Before	After

sessions/grid/sessionsGrid/PillSidePanelGap/Light

Before	After

sessions/grid/sessionsGrid/JustifiedPillSideAndBottomPanelGap/Light

Before	After

sessions/grid/sessionsGrid/MultipleChats/Light

Before	After

sessions/grid/sessionsGrid/RelatedChats/Light

Before	After

sessions/grid/sessionsGrid/MixedRelatedChats/Light

Before	After

sessions/grid/sessionsGrid/PillChatTabs/Light

Before	After

sessions/grid/sessionsGrid/NestedChatGroups/Light

Before	After

sessions/editorHeader/editorHeader/ConnectedChangesCard/Light

Before	After

sessions/editorHeader/editorHeader/CompactLayoutChangesCard/Light

Before	After

sessions/editorHeader/editorHeader/CompactLayoutSecondTabCard/Light

Before	After

sessions/editorHeader/editorHeader/ConnectedSecondTabCard/Light

Before	After

sessions/editorHeader/editorHeader/FullHeader/Light

Before	After

sessions/editorHeader/editorHeader/CompactFullHeader/Light

Before	After

sessions/editorHeader/editorHeader/BreadcrumbsAndAction/Light

Before	After

sessions/editorHeader/editorHeader/BreadcrumbsAndSecondaryAction/Light

Before	After

sessions/editorHeader/editorHeader/BreadcrumbsOnly/Light

Before	After

sessions/editorHeader/editorHeader/PrimaryActionOnly/Light

Before	After

sessions/editorHeader/editorHeader/SecondaryActionOnly/Light

Before	After

sessions/editorHeader/editorHeader/LayoutActionsOnly/Light

Before	After

sessions/blockedSessionsList/BlockedSessionsList_FixCIAndApproval/Light

Before	After

sessions/chatCompositeBar/StickyMessageFrame/Light

Before	After

sessions/chatCompositeBar/StickyMessageFrameNarrow/Light

Before	After

sessions/chatCompositeBar/FirstChatActive/Light

Before	After

sessions/chatCompositeBar/TwoChats/Light

Before	After

sessions/chatCompositeBar/MixedStatuses/Light

Before	After

sessions/chatCompositeBar/LongTitles/Light

Before	After

sessions/chatCompositeBar/Renaming/Light

Before	After

sessions/chatCompositeBar/WithDraftChat/Light

Before	After

sessions/chatCompositeBar/CompactTabs/Light

Before	After

sessions/chatCompositeBar/InactiveSession/Light

Before	After

sessions/chatCompositeBar/OverflowingTabs/Light

Before	After

sessions/chatCompositeBar/PillTabs/Light

Before	After

Added (3)

sessions/grid/sessionsGrid/SidePanelGapRtl/Light

sessions/grid/sessionsGrid/SidePanelGapRtlNoFileIcons/Light

sessions/grid/sessionsGrid/RelatedChatsRtl/Light

Copilot

🟢 Approval recommended

The spacing and RTL changes are focused, lifecycle-safe, and comprehensively covered by targeted tests and fixtures.

0 open findings

What changed in this PR

Balances Agents-window tab spacing while preserving standard editor-tab geometry and improving RTL clipping behavior.

Changes:

Separates chat-tab padding from editor icon gutters.
Corrects Connected-tab RTL shoulders, clipping strokes, and cleanup.
Adds RTL, high-contrast, fractional-width, and visual fixture coverage.

File	Description
`build/lib/stylelint/vscode-known-variables.json`	Registers the new tab inset variable.
`src/vs/sessions/browser/parts/chatCompositeBar.ts`	Tracks action spacing and clipping state.
`src/vs/sessions/browser/parts/media/chatCompositeBar.css`	Updates chat spacing and RTL rendering.
`src/vs/sessions/browser/parts/media/editorPart.css`	Defines detail-tab icon insets.
`src/vs/sessions/contrib/chat/test/browser/sessionsGrid.fixture.ts`	Adds RTL visual fixtures.
`src/vs/sessions/test/browser/chatCompositeBar.test.ts`	Expands spacing and clipping tests.
`src/vs/workbench/contrib/modernUI/browser/media/tabs.css`	Separates editor and standalone tab padding.
`src/vs/workbench/test/browser/componentFixtures/sessions/chatCompositeBar.fixture.ts`	Updates visual expectations.

🧠 Review effort: Balanced

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Size the tab viewport and its scrollable wrapper explicitly so RTL clipping coverage does not depend on platform-specific outer flex sizing. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

🟢 Approval recommended

The scoped styling and lifecycle changes are supported by focused RTL, clipping, disposal, and visual regression coverage.

0 open findings

🧠 Review effort: Balanced

vs-code-engineering · 2026-10-10T04:14:05Z

📬 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/media/chatCompositeBar.css
src/vs/sessions/browser/parts/media/editorPart.css

Preserve the validated source tree while refreshing the head signature using cherwan@microsoft.com. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

🔵 Needs a closer look

Fractional-width RTL clipping relies on browser-specific geometry and warrants final human visual verification.

0 open findings

🧠 Review effort: Balanced

sessions: balance chat and detail tab spacing

8071f9e

Preserve editor icon gutters, logical chat action spacing, and Connected RTL outlines at aligned and genuinely clipped viewport edges. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI balanced review requested due to automatic review settings October 9, 2026 23:40

Copilot started reviewing on behalf of Cherry Wang (chryw) October 9, 2026 23:41 View session

Copilot AI reviewed Oct 9, 2026

View reviewed changes

vs-code-engineering Bot assigned Cherry Wang (chryw) Oct 10, 2026

test: stabilize fractional chat tab viewport across platforms

2570209

Size the tab viewport and its scrollable wrapper explicitly so RTL clipping coverage does not depend on platform-specific outer flex sizing. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Cherry Wang (chryw) requested a balanced review from Copilot October 10, 2026 01:55

Copilot started reviewing on behalf of Cherry Wang (chryw) October 10, 2026 01:56 View session

Copilot AI reviewed Oct 10, 2026

View reviewed changes

Cherry Wang (chryw) mentioned this pull request Oct 10, 2026

editor: align Connected cap contour with the control radius #340835

Open

Cherry Wang (chryw) marked this pull request as ready for review October 10, 2026 04:13

chore: refresh signed PR head with corrected Git identity

88c8118

Preserve the validated source tree while refreshing the head signature using cherwan@microsoft.com. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Cherry Wang (chryw) requested a balanced review from Copilot October 10, 2026 05:26

Copilot started reviewing on behalf of Cherry Wang (chryw) October 10, 2026 05:26 View session

Copilot AI reviewed Oct 10, 2026

View reviewed changes

roblourens approved these changes Oct 11, 2026

View reviewed changes

Navigation Menu

Repository navigation

sessions: balance chat and detail tab spacing - #340823

sessions: balance chat and detail tab spacing#340823
Cherry Wang (chryw) wants to merge 3 commits into
mainfrom
dev/cherwan/agents/agents-window-chat-tab-spacing-fix

Cherry Wang (chryw) commented Oct 9, 2026

Uh oh!

github-actions Bot commented Oct 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

vs-code-engineering Bot commented Oct 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Cherry Wang (chryw) commented Oct 9, 2026

Changes

Testing

Visual comparison

Uh oh!

github-actions Bot commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot Changes

Changed (33)

Added (3)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

vs-code-engineering Bot commented Oct 10, 2026

📬 CODENOTIFY

Benjamin Christopher Simmonds (@benibenj)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Oct 9, 2026 •

edited

Loading