feat(web): move panel tab close to the right of the title

[funkeeflow]

Closes #11877

What Changed

Right-panel / in-app browser tabs (and the terminal list that shares the same control) now use a VS Code-style row: icon → title → hover ×.

PanelTabCloseButton no longer swaps the surface icon for close. The identity icon stays on the left; the existing hover/focus × sits after the title. Mute stays a sibling. Panel-level close and the add-surface menu are untouched.

Why

Close was fused with the left-side identity icon ([icon→×] [title]). That reads as Safari / Chrome-on-macOS, not IDE chrome. Julius accepted #11877 with this split; a flex reorder alone would have put the icon after the title.

UI Changes

Before	After

Before: [×/icon] [mute?] [title]
After: [icon] [mute?] [title] [×]

Hover/focus still reveals ×; it is just on the right.

Checklist

• This PR is small and focused
• I explained what changed and why
• Before/after screenshots
• Layout change only; hover-to-reveal is unchanged
• Targeted tests: RightPanelTabs.test.tsx, ThreadTerminalDrawer.test.ts

Cursor Grok 4.6 via T3 Code / Cursor harness.

Summary by CodeRabbit

• UI Improvements
  • Moved panel and terminal tab close buttons to the end of each tab for more consistent navigation.
  • Kept surface and terminal icons visible separately from the close action.
  • Updated close buttons to display the close icon consistently on hover and focus.
  • Improved tab title spacing and alignment.

Closes discussions

• #17986: Align tab close button to the right

[macroscopeapp]

Approvability

Verdict: Approved at 0593996

Macroscope's review found this PR approvable — This is a localized UI layout change that repositions the existing tab close control while preserving its callbacks, labels, tooltip, and focus/hover behavior. It introduces no schema, infrastructure, security-sensitive, product-default, or static-analysis changes.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 364e09c3-9ff4-4b42-9e96-41ce13c33d15

---

📥 Commits

Reviewing files that changed from the base of the PR and between b4d1b69 and 0593996.

---

📒 Files selected for processing (2)

• apps/web/src/components/RightPanelTabs.tsx
• apps/web/src/components/ThreadTerminalDrawer.tsx

---

🚧 Files skipped from review as they are similar to previous changes (2)

• apps/web/src/components/ThreadTerminalDrawer.tsx
• apps/web/src/components/RightPanelTabs.tsx

---

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

---

📝 Walkthrough

Walkthrough

PanelTabCloseButton now renders a fixed close icon. Surface and terminal tabs render their icons separately and place the close control after the title.

Changes

Tab close controls

Layer / File(s)	Summary
Close button behavior apps/web/src/components/ui/panel-tab-close-button.tsx	PanelTabCloseButton now accepts label instead of children, always renders the X icon, and invokes onClick directly.
Right-panel tab layouts apps/web/src/components/RightPanelTabs.tsx, apps/web/src/components/ThreadTerminalDrawer.tsx	Surface and terminal tab icons render in separate spans. The close button appears after the title button. The surface title button gains shrink, and the terminal row uses pr-2 padding.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature · Severity of issue fixed: Low

---

Merge Risk: ⚪ Minimal · up to 05939

The close control is inset slightly farther from the tab edge without a confirmed behavior regression.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check		Issue #11877 requires the close control after the title and requires the existing hover-to-reveal and focus behavior to remain. RightPanelTabs and ThreadTerminalDrawer now render the identity icon…
Out of Scope Changes check		The changes are limited to the shared tab close control and its right-panel consumers. The separate identity-icon spans and title shrink classes support the requested layout. The trailing padding keep…
Title check		The title clearly and concisely describes the main change: moving the panel tab close button to the right of the title.
Description check		The description explains the problem, change, scope, approval context, UI impact, screenshots, and targeted tests. It does not use the template headings exactly and does not state the observed test re…

---

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

---

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

Dismissing prior approval to re-evaluate 0593996

[alexandre-vl]

Hi @funkeeflow — this passed triage on Oct 1 but now conflicts with main: #17730 moved the tabs into SortableTab, and #9791 gated terminal close behind canOperateTerminal.

I rebased it onto current main keeping your commit, and added one on top that floats the ×:
alexandre-vl/t3code@main...feat/tab-close-right

• Inactive tabs: the × floats over the end of the title on hover/focus, so hovering never changes a width and there's no empty slot.
• Active tab: the × stays visible in its own space (the tab grows up to 10px when it becomes active).
• A 64px min tab width keeps short titles (e.g. a terminal running vi) clickable. Touch screens always show the ×.
• Terminal observers still get no ×. fmt/lint/typecheck and the tab/drawer tests (40) pass.

Happy for you to pull it in, or I can open a replacement PR crediting you. Easy to go back to a fixed slot on every tab if maintainers prefer.

	Before (main)	After
Right panel, hovering Terminal 1
Terminal list

[maria-rcks]

Note

Written by claude-opus-5-5 on behalf of Maria

Hi! We are cleaning up open PRs, and this one appears to have been created with an older model (grok 4.6). If this change is really important, we recommend rebuilding the PR with a newer model if possible.