[Claudesaul]

Problem

When the right panel opens or closes with panel animations on, its tab bar slides under the title bar buttons and draws over them.

Change

The panel's content now stays pinned to the right edge while the panel's width animates. Closing uncovers the chat instead of sliding the content right, so the buttons stay clear. Maximized panels are unchanged.

Scope and approval

A small fix for an obvious visual bug in PreviewPanelShell.tsx. It does change how the panel animation looks: the content no longer slides, the panel edge sweeps over it.

Verification

• Lint, format, typecheck, RightPanelTabs tests and the DevicePanel browser test pass.
• Ran the app with vp run dev (dark mode, 300ms panel animation) and stepped the close and open animations frame by frame, before and after. Also checked that maximize still fills the window. Not checked in the Electron window.
• Both sides of the GIF include the maximize fix from fix(web): maximize button no longer jumps when the right panel closes #26232, so only this change differs.

Recording: a few opens and closes, then zoomed in and frozen mid-close.

Goes with #26232 and #26315: all three clean up the title bar while a panel closes.

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

[macroscopeapp]

Approvability

Verdict: Approved at 856c166

Macroscope's review found this PR approvable — The change keeps inline panel content right-aligned during opening and closing so its tab bar avoids the title-bar controls. Its effects are limited to visual layout, with maximized panels and other panel modes unchanged.

^{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

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: 7e71392
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 99daebd0-8d3e-4749-98e0-8829c08c4025

Commits

Reviewing files that changed from the base of the PR and between 7e71392 and 856c166.

Files selected for processing: 1

• apps/web/src/components/preview/PreviewPanelShell.tsx

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

Walkthrough

For collapsible panels that are not maximized, the wrapper now right-aligns the panel content. The inner panel uses shrink-0 instead of a fixed-width class. Its inline width calculation remains unchanged.

Changes: Preview panel alignment

Layer / File(s)	Summary
Align collapsible panel content apps/web/src/components/preview/PreviewPanelShell.tsx	The wrapper right-aligns collapsible, non-maximized content. The inner panel uses shrink-0 instead of a fixed-width class. Its inline width calculation is unchanged.

Priority: Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: Minimal · up to 856c1

No actionable merge-blocking risk remains in the reviewed change.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly identifies the web UI bug and the main fix: the right panel tab bar no longer slides under the title bar controls.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description follows the template's main sections: Problem, Change, Scope and approval, and Verification. The problem and change are clear, and the verification lists specific checks with observed …

Full details: Description check

Explanation

The description follows the template's main sections: Problem, Change, Scope and approval, and Verification. The problem and change are clear, and the verification lists specific checks with observed results, a GIF, and a model/harness line. Two gaps remain. The Scope and approval section gives no link to a triaged issue or maintainer-approved discussion, and it argues the fix is a small obvious bug without linking any approval. The title is not stated in the description, and the Verification section notes the Electron window was not checked, which the template asks authors to state. Overall the description is mostly complete, so it passes.

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

[maria-rcks]

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

verified unchanged head 856c166609fa9ec3dd87420c7ebe363af918f61b on this linux boat vm with repo playwright, /usr/bin/google-chrome, and the real web client.

• reproduced on github/main at 5ef56853ef in a separate worktree after vp i. created a project and thread through the app pointing at the real repository. in dark mode with 300 ms animations, the files tab/add control slides beneath the maximize control while opening.
• stopped the captured main dev process before starting the exact pr head. ran vp i and background vp run dev with isolated .t3 state. main server/web ports: 16733/8693. pr: 13773/5733.
• created the same project and prompts through the pr ui. real codex gpt-6.1-sol read README.md with a tool and rendered its heading, then rendered PANEL CHECK OK in a second turn. no mocks, replay provider, fixtures, or seeded conversations.
• repeated opening and closing. content stays pinned to the right edge and titlebar controls stay clear. live opening/closing samples retained content right=1440 as the shell width changed. at the matching 30 ms opening point, main content right=1815.94 and pr content right=1440. screenshots pause the actual css transition and use the same repository tree and crop.
• resized and confirmed the width survived close/reopen. maximize filled the workspace from x=256 to x=1440; restore returned the inline panel. opened README.md through the files tree, added a files tab, and switched between both tabs. also checked light mode at 1100x800 and opening/closing with animations disabled.
• existing RightPanelTabs.test.tsx passed through blacksmith-check: 4 tests. ci reports 23 passed and 6 skipped, with no failures. no source changes or pushes were needed.

before, main:

after, pr:

gif recording: opens/closes, maximize/restore, resizing, file opening, and tab switching. inspected the exported clip and verified uploaded playback to the end and seeking in t3.

Not verified

native electron window controls, macos/windows, ios/android, and relay/tunnel connections were not exercised on this linux web run. other providers were not exercised; this change is client layout only.

main completed both codex turns in its provider log but did not render their replies in chat. the exact pr head rendered both replies correctly. this baseline observation was not investigated or changed in this focused verification.