Skip to content

fix(web): side pane tab bars match the pane below them - #29064

Merged
maria-rcks merged 2 commits into
pingdotgg:maria/redesign/6-workspace-panesfrom
flamboh:t3/redesign-fix-side-tab-bar-bg
Nov 2, 2026
Merged

maria-rcks merged 2 commits into
pingdotgg:maria/redesign/6-workspace-panesfrom
flamboh:t3/redesign-fix-side-tab-bar-bg

Conversation

@flamboh

@flamboh flamboh commented Nov 2, 2026 •

Copy link
Copy Markdown
Contributor

Fix for the redesign stack, targets layer 6 (#28845).

Problem

Side pane tab bars were a different color from the pane below them. On the default theme the tab bar drew --background with grain over a plain --background body. On every other theme a second mismatch showed: the PR pane body paints --code-surface and the terminal paints --terminal-background. Those equal --background on the default theme only. On Ember, Iris, Ocean, Grove and imported VS Code themes they are their own colors, so the strip right of a PR tab was darker than the pane under it.

Fix

  • The tab bar takes the background token of the active pane's body: --code-surface for PR and single-file panes, --terminal-background for terminals, --background for everything else (browser, files, linked PRs, side chat, device). Because the bar and the body read the same token, they match on any palette.
  • The bar stays solid, so content scrolling under it is still hidden. The grain is gone from the bar, and the browser pane body no longer draws it either, so neither side shows a seam.
  • Diff panes have no empty strip: their toolbar fills the whole row.

Before / after

Side pane tab bars before and after on the default theme, dark and light, for terminal, browser and files panes

Terminal, browser and files panes on Ember and Iris (dark), layer 6 base 814c2e3 vs this PR. The strips already matched their pane bodies here; the only change on these panes is the grain leaving the bar and the browser body (at most 6/255 per channel).

Ember dark: side pane tab bar and top of the terminal, browser and files panes, before (layer 6 base) and after (this PR); bar and body match in both

Iris dark: side pane tab bar and top of the terminal, browser and files panes, before (layer 6 base) and after (this PR); bar and body match in both

Strip vs PR pane body on tinted themes (Ember and Iris, dark), layer 6 vs this PR:

Before: on Ember and Iris the strip right of the PR tab is a different color from the PR pane below it; after: they match

Validation

  • Measured the strip against the pane body, by computed background-color and by averaged screenshot pixels. Panes: thread, browser, terminal, files and PR. Themes: T3 Code, T3 Chat, Ember, Iris, Ocean, Grove, plus imported VS Code dark and light themes, each in dark and light. All match. Before this commit, PR panes were off by up to 21/255 per channel on the tinted and imported themes, and terminals were off on imported themes.
  • vp run check:changed origin/maria/redesign/6-workspace-panes: format, lint, knip, typecheck, tests and React compiler all pass.

Done with Claude Code (Opus 5.5) in T3 Code.

@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Nov 2, 2026
macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Nov 2, 2026
@macroscopeapp

macroscopeapp Bot commented Nov 2, 2026 •

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved at 226de43

Macroscope's review found this PR approvable — Side-pane tab bars now match the active pane’s background, and previews lose decorative grain. The changes are presentation-only, with no effect on product behavior or stored data.

You can add or adjust custom eligibility rules. Learn more.

…theme

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@macroscopeapp
macroscopeapp Bot dismissed their stale review November 2, 2026 12:19

Dismissing prior approval to re-evaluate 226de43

@github-actions github-actions Bot added size:S 10-29 changed lines (additions + deletions). and removed size:XS 0-9 changed lines (additions + deletions). labels Nov 2, 2026
@maria-rcks

maria-rcks commented Nov 2, 2026 •

Copy link
Copy Markdown
Collaborator

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

verified unchanged head 226de43251c8c1c8825b547339f40099aabeb7a4 on linux with repo playwright and /usr/bin/google-chrome.

  • installed and ran github/main (84537c4dd9) in a separate worktree first. ember dark reproduced the file tab strip/code body mismatch. main predates the redesign stack, so the surrounding layout differs.
  • stopped main before starting the exact pr head. used isolated dev state, a real git project added through the app, and matching thread/file data copied from that stopped dev instance. no mocks or seeded demo data.
  • real codex gpt-6.1-sol turns completed through the web composer and running server. the first ran pwd and git rev-parse --short HEAD; subsequent turns returned the requested response and pr link.
  • opened file, terminal, browser and linked pr tabs through the ui. checked all four across t3 code, ember and iris in light and dark mode: 24 header/token comparisons matched, with no floating-header grain. ember dark file/pr headers resolved to oklch(0.299662 0.017229 39.973); terminal/browser resolved to oklch(0.245899 0.019144 42.044).
  • checked file scrolling, terminal command input/output, browser navigation to example.com, pr summary/timeline/code navigation, and the empty diff state. inspected at 1440x1000 and 1100x800. the solid header continues to cover scrolled content.
  • observed 32 successful ci checks on this head. no source changes or pushes were needed.

before, main, ember dark, same thread and package.json:

main file tab strip differs from the code body in ember dark

after, exact pr head:

pr file tab strip uses the code body background in ember dark

interaction recording, including file scrolling, terminal output and browser/pr switching:

running app pane switching and terminal input recording

Not verified

native ios/android, electron shell behavior on macos/windows, imported vscode themes, remaining built-in palettes, device and side-chat panes, and remote/relay/tunnel connections were not exercised on this linux web pass. no performance claim is made.

@maria-rcks
maria-rcks merged commit 8f4ac9f into pingdotgg:maria/redesign/6-workspace-panes Nov 2, 2026
33 of 34 checks passed
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 3, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 4, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 5, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 6, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 6, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 6, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 6, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 6, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
maria-rcks pushed a commit that referenced this pull request Nov 6, 2026
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants