Skip to content

fix(desktop): match workspace pane tab borders to right sidebar tabs - #6281

Merged
Kitenite merged 1 commit into
mainfrom
tabs-border-styling
Aug 9, 2026
Merged

Kitenite merged 1 commit into
mainfrom
tabs-border-styling

Conversation

@Kitenite

@Kitenite Kitenite commented Aug 9, 2026 •

Copy link
Copy Markdown
Member

Summary

  • Workspace pane tabs now use the same inverted border scheme as the right sidebar's Files/Changes/Review tabs: the active tab is outlined on top/left/right with a transparent bottom border and opaque fill so it flows into the content below, while inactive tabs and the rest of the bar carry an unbroken bottom border line.

How It Works

  • TabItem.tsx: active tab gets border border-border border-b-transparent bg-background; inactive tabs get border border-transparent border-b-border. All states keep a 1px border on every side so tabs don't shift when switching.
  • TabBar.tsx: every non-tab region (leading chrome, add-tab button slot, drag filler, overflow add button, trailing controls) carries border-b border-border so the line spans the full bar width. The border lives on each region rather than the bar root, because a root-level border-b would draw a line under the active tab and break the blend-into-content effect.

Testing

  • bun run lint (clean)
  • tsc --noEmit in packages/panes (clean)
  • Manual: verified end-to-end over CDP in the dev desktop app — opened a workspace with two terminal tabs and captured zoomed screenshots of both the pane tab bar and the sidebar tabs; the active tab blends into the content below and the bottom border line runs unbroken under inactive tabs, the + button, and the filler, matching the sidebar treatment.

Summary by cubic

Match workspace pane tab borders to the right sidebar style. Active tabs now flow into content; the bottom border stays continuous under inactive tabs and non-tab regions.

  • Bug Fixes
    • In TabItem.tsx, active tabs use border border-border border-b-transparent bg-background; inactive tabs use border border-transparent border-b-border to avoid layout shift.
    • In TabBar.tsx, add border-b border-border to non-tab regions (leading area, add-tab slots, drag filler, overflow add button, trailing controls) so the bottom line spans the full width.

Written for commit 780924e. Summary will update on new commits.

Review in cubic

@Kitenite
Kitenite merged commit 24f1fe4 into main Aug 9, 2026
11 of 12 checks passed
@coderabbitai

coderabbitai Bot commented Aug 9, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0b5f0797-0c66-4dec-a31c-283c9d314bd5

📥 Commits

Reviewing files that changed from the base of the PR and between 464b5e9 and 780924e.

📒 Files selected for processing (2)
  • packages/panes/src/react/components/Workspace/components/TabBar/TabBar.tsx
  • packages/panes/src/react/components/Workspace/components/TabBar/components/TabItem/TabItem.tsx

📝 Walkthrough

Walkthrough

The tab bar now applies bottom borders to its layout regions. Active tabs use transparent bottom borders with visible side and top borders. Inactive tabs preserve the bottom border. Tab interaction and drag/drop behavior remain unchanged.

Changes

Tab border styling

Layer / File(s) Summary
Container and tab border classes
packages/panes/src/react/components/Workspace/components/TabBar/TabBar.tsx, packages/panes/src/react/components/Workspace/components/TabBar/components/TabItem/TabItem.tsx
Tab bar regions now include bottom borders. Active tabs use visible side and top borders with a transparent bottom border. Inactive tabs retain the bottom border with transparent side and top borders.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

Suggested reviewers: saddlepaddle

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch tabs-border-styling

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Aug 9, 2026 •

Copy link
Copy Markdown
Contributor

🚀 Preview Deployment

🔗 Preview Links

Service Status Link
Neon Database (Neon) ✅ View Branch
Vercel API (Vercel) ✅ Open Preview
Vercel Web (Vercel) ✅ Open Preview
Vercel Marketing (Vercel) ✅ Open Preview
Vercel Admin (Vercel) ✅ Open Preview
Vercel Docs (Vercel) ✅ Open Preview

Preview updates automatically with new commits

This branch was previously deployed

1 inactive deployment
preview — 780924e0 Deployed Aug 9, 2026 by Kitenite via Deploy Docs #7301
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.

1 participant