fix(web): chat stays centered while the thread details card fits beside it by koushikxd · Pull Request #25838 · pingdotgg/t3code

koushikxd · 2026-10-27T08:49:01Z

Problem

On canvases between roughly 1012 and 1708 CSS px wide, such as a 13" MacBook Air with the sidebar open, opening the thread details card pushes the chat and composer up to 146px left of center. That happens even when the centered chat would already clear the card. Opening or closing the card makes the whole chat column jump sideways. Fixes #25834.

Screenshots below are from a 13" MacBook Air with the sidebar open. "Before" is the current release; "After" is this branch at the same width (1470px window, 1214px canvas).

Before: card open	After: card open	Card closed (centered)

Change

#25778 dropped the centerBesideDetails flag and enabled besideShift for everyone. This restores the rule from before that change: the chat stays centered and moves left only as far as it needs to clear the card plus DETAILS_CARD_CLEARANCE.

 resolveChatCanvasLayout
   canvasCenterLeft = (container.width - normalWidth) / 2
-  besideShift = center the chat in the lane left of the card, up to half the card lane
-  normalLeft = clamp(canvasCenterLeft - besideShift, padding, laneRight - normalWidth)
+  normalLeft = clamp(canvasCenterLeft, padding, laneRight - normalWidth)

At the MacBook Air's 1214px canvas, the chat now moves 85px instead of 146px, which is just enough to clear the card. Once the centered chat clears the card (a canvas of about 1384px or wider), it doesn't move at all.

Scope and approval

This is a regression fix for #25834. besideShift only applied behind the redesign setting until #25778 made the new design the default, so this puts back the shipped default placement from #14992. It doesn't change the card's own placement, the popover threshold, or the preview mini-player.

Verification

vp test run apps/web/src/components/chat/chatCanvasLayout.test.ts:

Before (fix stashed): 5 failed.
- New: keeps chat centered while the card fits beside it. A 1500px canvas expects left: 382, but current main gives left: 294.
- moves the chat left only as far as a details card it would crowd requires expects left: 1052 - 32 - 736.
- Three existing tests whose expected values refactor(web): the new design is the only design, with no toggle #25778 had changed to match the shift. They're restored to their values from before refactor(web): the new design is the only design, with no toggle #25778.
After: 20 passed.

vp run check:changed: format, lint, knip and tests pass.

Manual check: I ran this branch in a 1470×920 browser window with the sidebar and the details card open, on the new-thread screen. The 1214px canvas would center the chat at x=495. The chat sits at x=410, which is its edge clamped to 32px left of the card at x=1178. It would be at x=349 on main.

Merge danger

Door: two-way. It's a pure layout calculation, and reverting is a one-line change.

Blast radius: chat horizontal position while the details card is inline. It applies to web and desktop only; mobile doesn't use this layout.

Written by Claude Opus 5.5 in Claude Code, run through T3 Code.

…de it Restores the pre-pingdotgg#25778 placement: the chat moves left only as far as it needs to clear the details card, instead of centering in the lane beside it. Fixes pingdotgg#25834 Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

macroscopeapp · 2026-10-27T08:50:36Z

Approvability

Verdict: Approved at e50d585

Macroscope's review found this PR approvable — This is a focused layout bug fix that changes only the chat-position calculation and corresponding tests, preserving canvas centering until the details card requires clearance. It introduces no new capability, schema, deployment, security, billing, or static-analysis changes.

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

coderabbitai · 2026-10-27T08:53:09Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration

Source mode: Auto
Repository: pingdotgg/t3code
Branch: main
File: .coderabbit.config.ts
Commit: 40d335a
Layers: Repository TS config
Review profile: CHILL
Plan: Advanced
Run ID: 26b2f332-efbe-46d2-8ad8-9c2fd80314d7

Commits

Reviewing files that changed from the base of the PR and between 466dd9b and c391306.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: pingdotgg/t3code
Branch: main
File: .coderabbit.config.ts
Commit: c175e57
Layers: Repository TS config
Review profile: CHILL
Plan: Advanced
Run ID: dd4f6162-97c0-43db-b9b2-09fff68df15b

Commits

Reviewing files that changed from the base of the PR and between c175e57 and e50d585.

Files selected for processing: 2

apps/web/src/components/chat/chatCanvasLayout.test.ts
apps/web/src/components/chat/chatCanvasLayout.ts

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

The chat layout resolver no longer applies an eased left shift when a details card is present. It clamps the centered chat position to the available lane. Tests cover card clearance, resized placement, and a workspace card that fits beside chat.

Changes: Chat canvas layout

Layer / File(s)	Summary
Centered chat placement `apps/web/src/components/chat/chatCanvasLayout.ts`, `apps/web/src/components/chat/chatCanvasLayout.test.ts`	The resolver clamps the centered chat position to the available lane instead of applying the prior eased shift. Tests check placement beside the details card, resized placement, and centering when the workspace card fits.

Priority: Low

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

Change: Bug fix · Severity of issue fixed: Low

Possibly related issues

pingdotgg/t3code#25834 — Reports the leftward chat shift when an inline details card is open on smaller canvases.

Possibly related PRs

pingdotgg/t3code#25778 — Removes the layout gate and input associated with the same chat-centering behavior.
pingdotgg/t3code#25251 — Adds the earlier details-card chat-centering calculation and tests.
pingdotgg/t3code#25731 — Passes details-card placement through the canvas model to the layout resolver.

Suggested reviewers: t3dotgg

Merge Risk: Minimal · previous review e50d5

The layout change is supported by updated tests, with no merge-blocking risk identified.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title is concise, conventional, and accurately describes the primary layout fix: keeping the chat centered when the thread details card fits beside it.
Linked Issues check		The change satisfies `#25834`. `resolveChatCanvasLayout` now clamps the canvas-centered chat position to the lane ending at `detailsCard.left - DETAILS_CARD_CLEARANCE`. This keeps the chat centered when…
Out of Scope Changes check		The diff stays within `#25834`. It changes only the chat layout calculation and its automated expectations. It does not change details-card placement, the popover threshold, or preview mini-player behav…
Description check		The description includes all required sections. It clearly explains the problem, change, scope, linked issue, test results, manual verification, and merge risk. It also includes UI screenshots, althou…

Full details: Linked Issues check

Explanation

The change satisfies #25834. resolveChatCanvasLayout now clamps the canvas-centered chat position to the lane ending at detailsCard.left - DETAILS_CARD_CLEARANCE. This keeps the chat centered when it clears the card and shifts it left only when required. The tests cover the centered, clearance, narrowing, and smooth-resize cases, including the reported 1500px and 1344px layouts.

Full details: Out of Scope Changes check

Explanation

The diff stays within #25834. It changes only the chat layout calculation and its automated expectations. It does not change details-card placement, the popover threshold, or preview mini-player behavior.

Full details: Description check

Explanation

The description includes all required sections. It clearly explains the problem, change, scope, linked issue, test results, manual verification, and merge risk. It also includes UI screenshots, although the available context indicates that no after-fix screenshot was captured from a running build, so the screenshot evidence may need clarification.

Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

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

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

BharathxD · 2026-10-27T09:34:24Z

+1

koushikxd · 2026-10-28T10:14:44Z

hey @maria-rcks @juliusmarminge can u please check this out. my OCD can't handle the layout shifts

koushikxd mentioned this pull request Oct 27, 2026

[Bug]: chat and composer shift far left when the thread details card is open on smaller screens #25834

Open

github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:S 10-29 changed lines (additions + deletions). labels Oct 27, 2026

macroscopeapp Bot approved these changes Oct 27, 2026

View reviewed changes

koushikxd added a commit to koushikxd/t3code that referenced this pull request Oct 27, 2026

After screenshot for pingdotgg#25838

94f2029

koushikxd added a commit to koushikxd/t3code that referenced this pull request Oct 27, 2026

Sharper after screenshot for pingdotgg#25838

17f36ae

koushikxd added 2 commits October 27, 2026 16:59

Merge branch 'main' into fix/chat-beside-details-shift

86d88e2

Merge branch 'main' into fix/chat-beside-details-shift

466dd9b

Merge branch 'main' into fix/chat-beside-details-shift

c391306

Navigation Menu

Repository navigation

fix(web): chat stays centered while the thread details card fits beside it - #25838

fix(web): chat stays centered while the thread details card fits beside it#25838
koushikxd wants to merge 4 commits into
pingdotgg:mainfrom
koushikxd:fix/chat-beside-details-shift

koushikxd commented Oct 27, 2026 •

edited

Loading

Uh oh!

macroscopeapp Bot commented Oct 27, 2026

Uh oh!

coderabbitai Bot commented Oct 27, 2026 •

edited

Loading

Review skipped

Uh oh!

BharathxD commented Oct 27, 2026

Uh oh!

koushikxd commented Oct 28, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

koushikxd commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Change

Scope and approval

Verification

Merge danger

Uh oh!

macroscopeapp Bot commented Oct 27, 2026

Approvability

Uh oh!

coderabbitai Bot commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

BharathxD commented Oct 27, 2026

Uh oh!

koushikxd commented Oct 28, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

koushikxd commented Oct 27, 2026 •

edited

Loading

coderabbitai Bot commented Oct 27, 2026 •

edited

Loading