fix(web): thread details toggle no longer covers the thread title on Windows desktop

[freddy-d]

Problem

On the Windows desktop app, opening the right panel and dragging it wider moves the thread details toggle on top of the thread title. It should sit beside the panel's edge, as it does in the browser and on macOS.

Change

While the right panel is open, the toggle is positioned inside the chat header, but it used --workspace-controls-right. In the desktop app's window-controls overlay that inset also clears the native minimise/maximise/close buttons (about 150px on Windows). Those buttons sit over the right panel, not the chat header, so the toggle landed about 150px in from the chat column's edge, past the 40px the title reserves for it.

The toggle now uses the chat header's own inset (env(safe-area-inset-right) + 0.75rem, the non-overlay value of the same variable), so the browser and macOS render exactly as before. The pull requests page keeps the shared variable because its controls sit on the window edge.

Scope and approval

A one-line positioning fix for an obvious layout bug, so it should fit the small obvious bug-fix exception. No product behavior changes.

Related: #15371 addresses the same overlap by reserving more title padding while leaving the toggle at the inset position. This PR instead moves the toggle to the chat header's edge, so the title keeps its normal space and no gap is left beside the panel. Maintainers can pick whichever approach they prefer.

Verification

Tested in the Windows desktop app (vp run dev:desktop), with the right panel open and resized:

Before	After

• Before: the toggle sits about 150px in from the panel edge and covers "New thread".
• After: the toggle sits next to the panel edge and the title is clear. Closing the panel returns the toggle to the top-right controls as before.
• vp lint and vp fmt --check on ChatView.tsx: no new findings.
• The generated CSS is right: calc(env(safe-area-inset-right) + 0.75rem), identical to the old value outside the window-controls overlay.

Not checked: Linux and macOS desktop builds. Running the dev build locally also needed the one-line fix from #16799 (pairing currently fails with HTTP 500 on Node < 24.21); that change is not part of this PR.

Model: Claude Opus 5.5. Harness: Claude Code in T3 Code.

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: ed28ec19-bac9-48b6-8219-924f30b9c90b

📥 Commits

Reviewing files that changed from the base of the PR and between 611132c and 50c4128.

📒 Files selected for processing (1)

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

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

---

📝 Walkthrough

Walkthrough

The inline thread-panel title-bar control now uses the chat-header edge for its horizontal inset. The separate workspace title-bar controls retain their existing positioning.

Changes

Thread panel positioning

Layer / File(s)	Summary
Update the inline control inset apps/web/src/components/ChatView.tsx	The inline thread-panel control uses the safe-area inset plus 0.75rem instead of the workspace-controls inset. The separate workspace title-bar controls are unchanged.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the Windows desktop layout fix for the thread details toggle. It uses an appropriate conventional commit format.
Description check	✅ Passed	The description includes the problem, expected behavior, implementation details, scope rationale, verification steps, screenshots, test results, untested platforms, and agent attribution.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Approvability	✅ Passed	Pass. The pull request changes only apps/web/src/components/ChatView.tsx and makes a focused CSS positioning fix for the thread-panel control. It does not change defaults, static-analysis directives…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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