fix(web): composer prompt text no longer jumps when resting or expanding

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

ELI5

When the message box shrinks to one row or grows back, the text inside it hopped a few pixels right as the animation started. Now it slides smoothly from where it was.

Problem

The resting ⇄ expanded composer transition keeps the prompt in place with a FLIP translate, but it translated only the editor and lined up box tops. The placeholder is a sibling of the editor, so it got no transform and snapped about 3px on the first frame. Lining up box tops also ignored that the text sits at a different height inside each state's box (a 32px leading-8 resting row vs a 22.75px leading-relaxed line), which misplaced typed text by up to 5px before #13301.

Fix

The transition now targets the editor's container, which holds both the editor and the placeholder and is flush with the text box in every state. It measures the prompt at the centre of its first line instead of its box top. Text is vertically centred in its line in both states, so centre to centre is the real text movement. The offset is rounded to whole pixels so the text starts on the same pixel grid it rests on. The mobile collapsed prompt row falls back to half its height.

First-frame text offset from where it was, measured by intercepting the transition's animate() calls in Chromium:

	Placeholder	Typed text
Before #13301	±3px	+1 / −5px
main	±3px	±1px
This PR	0px	0px

UI Changes

Played at ¼ speed, expanding then collapsing. Watch the placeholder against the top of the card as each animation starts.

Before:

https://gh-file-drop-api-prod-galwoqjslzlnws6s.oliver-boorstein.workers.dev/f/6fd0e83e10a7edf8/before-transition-4x.mp4

After:

https://gh-file-drop-api-prod-galwoqjslzlnws6s.oliver-boorstein.workers.dev/f/8811a24b00da6936/after-transition-4x.mp4

Made by Claude Opus 5.5 in Claude Code (T3 Code).

Summary by CodeRabbit

• Bug Fixes
  • Improved chat composer transitions by aligning prompt movement with the visual center of its first line, helping prompt content remain more consistently positioned as the composer changes state. Action controls continue to use their existing positioning behavior, preserving their placement during these transitions.

[macroscopeapp]

Approvability

Verdict: Approved at 5f857a1

Macroscope's review found this PR approvable — This is a contained composer animation fix that adjusts prompt-line measurements and adds a stable transition target, without changing data contracts, defaults, workflows, or infrastructure. Its runtime impact is limited to visual positioning during existing resting and expansion transitions.

^{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: bce26345-161f-4ee3-afe8-a4890da013d6

📥 Commits

Reviewing files that changed from the base of the PR and between d5480b4275ecabcd73fdd536905f03b0b7763af0 and 5f857a1.

📒 Files selected for processing (1)

• apps/web/src/components/chat/ChatComposer.tsx

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

---

📝 Walkthrough

Walkthrough

Composer prompt transitions now select elements marked as transition prompts and measure prompt position from the first-line center. Action positioning continues to use the top edge.

Changes

Composer prompt transitions

Layer / File(s)	Summary
Mark and measure transition prompts apps/web/src/components/ComposerPromptEditorTiptap.tsx, apps/web/src/components/chat/ChatComposer.tsx	The composer marks its prompt as a transition prompt. Prompt position tracking and animation use the first-line center; action positioning continues to use the top edge.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 5f857

The composer transition change has no established user-facing regression or material merge blocker.

🚥 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 3 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly describes the main fix: preventing prompt text jumps during resting and expanding composer transitions.
Description check	✅ Passed	The description explains the problem, implementation, measured results, and UI behavior with before-and-after videos. It does not include the repository checklist or the exact template headings, but t…

• 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 5f857a1