editor: align connected tab geometry across wrapped states - #339028
Merged
Cherry Wang (chryw) merged 4 commits intoOct 1, 2026
Merged
Cherry Wang (chryw) merged 4 commits into
Cherry Wang (chryw) merged 4 commits into
Conversation
Share separator, shoulder, and action geometry across single-row, wrapped, and pinned tabs while preserving pill and legacy behavior. Add regression coverage and fixture matrices for themes, tab styles, action locations, and pinned layouts.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Screenshot ChangesBase: Changed (22)2 insignificant change(s) omitted (≤20 px, Δ≤2). See CI logs for details. Added (22)Removed (129) |
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Parent wrapping state can be incorrectly cleared in separate pinned-row layouts, and new CSS uses prohibited !important overrides.
Review effort: Balanced
Findings: 1
Open (3)
What changed in this PR
Aligns connected editor-tab geometry across wrapped, pinned, and scrolled states.
Changes:
- Unifies connected-tab radii, spacing, separators, clipping, and action clearance.
- Adds wrapping and sticky-edge state markers.
- Expands unit and visual fixture coverage.
| File | Description |
|---|---|
multiEditorTabsControl.test.ts |
Tests wrapping, clipping, and action geometry. |
editorTabBar.fixture.ts |
Adds pinned-action and connected-surface fixtures. |
editorTabBar.fixture.css |
Adds fixture hover and HC styling. |
modernUI.contribution.test.ts |
Updates CSS geometry expectations. |
connectedEditorTabs.css |
Implements the geometry and clipping changes. |
multiEditorTabsControl.ts |
Tracks wrapping and sticky adjacency. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Reduce editor-tab fixtures to distinct layout and configuration contracts, keep expanded theme coverage on two reference scenarios, and wait for wrapped layouts to settle deterministically. Also align iconless tab spacing when the file icon theme is disabled.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Aggregate wrapped state across multi-row tab controls and let the controller own overflow instead of CSS overrides. Reorganize editor tab fixtures, update Playwright fixture paths, and add regressions for pinned-row relayouts.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Cherry Wang (chryw)
marked this pull request as ready for review
October 1, 2026 18:12
Contributor
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: Benjamin Christopher Simmonds (@benibenj)Matched files:
|
Contributor
|
Cherry Wang (@chryw) can you resolve the CCR comment please! |
Measure the complete wrapped title against available height so Connected tab padding cannot overflow constrained editor groups. Cover both sides of the boundary with a regression test.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Lee Murray (mrleemurray)
approved these changes
Oct 1, 2026
Cherry Wang (chryw)
deleted the
dev/cherwan/agents/consistent-tab-height-alignment
branch
October 1, 2026 19:13
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.


Connected tabs drift between single-row, wrapped, pinned, and scrolled states: wrapped rows use different visible heights, shoulder/body joins can cross the separator, and the separate-row Unpin action sits closer to its pill edge than an ordinary Close action. This aligns those states around shared geometry while preserving each tab style's intended shape.
Changes
Testing
Validation
git diff --checkRelated work
connectedEditorTabs.cssand a rename/modify conflict on the formereditorTabBar.fixture.tspath; the overlapping layout TypeScript and test files auto-merge.