fix(web): keep chat banners inside the lane beside the docked details card

[macodev00]

Problem

With the thread details card docked beside the chat (canvas roughly 1000–1350px wide), the chat lane shifts left but the error and provider-status banners stay centered on the full canvas. The card paints over the end of the message and the dismiss button.

Fixes #17052

Change

The banner wrapper in ChatView gets a chat-banner-lane class and drops inset-x-0. In index.css that class joins the existing .chat-scroll-to-bottom rule, so the wrapper reads --chat-lane-inset-start / --chat-lane-inset-end like the composer, the timeline and the scroll-to-end pill already do. z-20 is unchanged.

Scope and approval

Triaged on the issue with this fix direction: #17052 (comment). Two-line, web-only layout fix. The z-index is left alone so this stays complementary with #16938, which edits the same className for stacking.

Verification

Base upstream/main 73e097b8c, head 8a0b7338a. Linux x86_64, Node v24.13.1.

• vp run --filter @t3tools/web typecheck: exit 0
• vp run --filter @t3tools/web test: 467 files passed, 6490 tests passed
• vp run knip:check: exit 0
• vp check: all 5139 files formatted, 0 errors (893 existing warnings)

Manual check in a running app: isolated web + server stack, 1306×920 viewport (1050px chat canvas) with the details card docked. On upstream/main the real Codex provider-status banner was 1018px wide and its dismiss button (x=1251) sat under the card (card x=1014). With the fix the same banner was 714px wide, centered in the lane, and the dismiss button (x=947) sat fully beside the card.

No unit test was added: the wrapper lives in ChatView and the lane rule is CSS, so the captures below are the check.

Limitations: the isolated stack produced the provider-status banner, not a thread-error banner (both share this wrapper). The preview mini-player's lane shift and mobile were not captured.

UI Changes

Before	After
before.mp4	after.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

[macroscopeapp]

Approvability

Verdict: Approved at 8a0b733

Macroscope's review found this PR approvable — This is a focused two-file layout fix that aligns existing chat banners with the same lane insets already used by the timeline and scroll control. Its runtime impact is limited to banner positioning beside the docked details card, with existing full-width behavior preserved.

^{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.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: b824a726-940c-4bf5-a5b5-611595f7820b

📥 Commits

Reviewing files that changed from the base of the PR and between 73e097b and 8a0b733.

📒 Files selected for processing (2)

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

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 banner wrapper now uses the chat lane insets. The existing CSS rule applies those insets to both the banner wrapper and the scroll-to-bottom button.

Changes

Chat banner lane alignment

Layer / File(s)	Summary
Apply chat lane insets to banners apps/web/src/index.css, apps/web/src/components/ChatView.tsx	The lane-inset rule now selects .chat-banner-lane. The banner wrapper uses that class instead of inset-x-0.

Priority: ⬇️ Low

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

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 8a0b7

The banner now stays within the chat lane beside the docked details card. No actionable merge-blocking risk is evident.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #17052 is active and directly linked. The reported change replaces inset-x-0 on the ChatView banner wrapper with chat-banner-lane. The existing CSS rule applies --chat-lane-inset-start a…
Out of Scope Changes check	✅ Passed	The supplied change summary reports only two focused web changes: one class replacement in ChatView.tsx and one selector addition in index.css. Both changes directly support issue #17052. No unrel…
Title check	✅ Passed	The title clearly and concisely describes the web layout fix that keeps chat banners inside the lane beside the docked details card.
Description check	✅ Passed	The description includes the problem, change, scope and approval, detailed verification results, limitations, and before/after UI evidence. It satisfies the required template.

✨ 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.}