fix(web): keep the terminal toggle clear of the last header action

[Mnigos]

Fixes #13419.

Problem

The terminal drawer toggle sits against Commit, push & PR, and its tooltip paints across that button. The header only reserves room for the two panel toggles with 4px of clearance, while the titlebar cluster next to it still mounts the right-panel maximize control while the panel is closed: invisible and inert, but still a flex item about a toggle wide, which pushes the terminal toggle left onto the last action. Same header on web and desktop.

Fix

• ChatHeader: the actions row reserves the two toggles plus the gap the actions keep between themselves (gap-2, gap-3 at @3xl) instead of 4px: spacing(19)+1px, spacing(15)+1px at sm, spacing(16)+1px at @3xl, with the page header's own 8px at sm folded in as before. This is what moves the git control away from the toggle.
• ChatView: while the right panel is closed the maximize control leaves the flex flow (absolute, anchored to the cluster's left edge with the same 4px gap), so the cluster is only as wide as the two toggles the header reserves room for. Being the cluster's leftmost item, it never moved the toggles themselves; leaving the flow only stops the invisible, inert control from lying over the actions area. It still fades in and out where it stood, so opening the panel does not make it jump.

Before / After

Web client at 1400×900, right panel closed, measured with Playwright (bounding boxes, CSS px). The terminal toggle stays where it was; the git split control moves left.

	Gap between the git control and the terminal toggle
Before (main at b2b43be)	4px
After	12px (@3xl; 8px below it)

Before	After

On the tooltip: it anchors to the terminal toggle in both builds (same popup box before and after). It is wider than the toggle and, this close to the window edge, the popup's collision handling shifts it left, so it opens below the header rather than over the toggle's own bounds; that is the tooltip's placement, not the hidden slot. The spacing change is what stops the toggle itself from crowding the button.

Tests

CSS and layout only; no logic changed. ChatHeader.test.ts still passes (8 tests); web typecheck and targeted lint are clean.

Implemented with Claude Code (Claude Fable 5.1).

Summary by CodeRabbit

• Bug Fixes
  • Improved the right-panel maximize control’s closed-state transition so it fades away without overlapping the terminal toggle.
  • Adjusted spacing between the terminal toggle and nearby header actions when the right panel is closed, including at wider screen sizes. When the panel is open, header spacing remains unchanged.

[macroscopeapp]

Approvability

Verdict: Approved at 7f8fe39

Macroscope's review found this PR approvable — This is a narrowly scoped two-file web layout fix that adjusts responsive spacing and removes an invisible control from flex flow while preserving existing panel interactions. It introduces no new capability, schema, configuration, or static-analysis changes.

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

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 67d6f4a7-9a6e-48c8-ae51-85a9692b8e9c

📥 Commits

Reviewing files that changed from the base of the PR and between d8ccc741fc44ac56ba9ac44998cffbf41282556e and 7f8fe39.

📒 Files selected for processing (2)

• apps/web/src/components/ChatView.tsx
• apps/web/src/components/chat/ChatHeader.tsx

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

---

📝 Walkthrough

Walkthrough

When the right panel is closed, the chat header reserves more right padding. The hidden maximize control is positioned outside the flex flow. Its open-state styling is unchanged.

Changes

Terminal toggle layout

Layer / File(s)	Summary
Closed-panel toolbar spacing and control positioning apps/web/src/components/chat/ChatHeader.tsx, apps/web/src/components/ChatView.tsx	When the right panel is closed, the header reserves more right padding, including an added @3xl/header-actions value. The hidden maximize control is removed from the flex flow and positioned at the left edge of the button cluster. Its open-state styling is unchanged.

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

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 7f8fe

The header spacing change should keep the terminal toggle clear of the last action without moving the visible controls. No actionable merge-blocking risk is established.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: keeping the terminal toggle clear of the last header action.
Description check	✅ Passed	The description explains the problem, fix, UI impact, screenshots, measurements, and test results. It does not use the template headings exactly and does not include the requested interaction video or…
Linked Issues check	✅ Passed	Issue #13419 requires spacing between the terminal drawer toggle and Commit, push & PR, and requires the hover state and tooltip to avoid that action. ChatHeader.tsx reserves space for the termina…
Out of Scope Changes check	✅ Passed	The pull request changes only ChatHeader.tsx and ChatView.tsx. The changes modify responsive header spacing and right-panel control positioning. These changes directly support issue #13419. The re…

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

Dismissing prior approval to re-evaluate 7f8fe39