[pouyarezvani]

Problem

Since #34649 made the interruption footer flow as one sentence, its bold "Run interrupted" label renders 2px above the reason beside it. The label is an inline-flex box with items-center, so no flex item takes part in baseline alignment and the box takes its baseline from its first item, the icon's bottom edge. That lifts the text off the line.

Closes #34684.

Change

The label box uses items-baseline instead of items-center. The label text now sets the box's baseline, so it lines up with the reason. The icon already has self-center, so it stays vertically centered.

Scope and approval

A one-class fix for an obvious visual bug in the divider #34649 just changed, reported in #34684. It changes no behavior.

Verification

• I rendered TimelineSystemDivider in Vitest browser mode (Chromium, dark theme, 2x), on main at a21b43f and on this branch, at 780px and 480px with a long reason and with a short one. On main, the label's cap top and baseline sit 4 device pixels above the reason's. On this branch they match exactly (cap top 48 and baseline 63 for both).

  

• The dividers that don't wrap their detail render byte-identically before and after: a fork divider with its action pill, a label with a detail, and a label alone.

• vp run check:changed passes: format, lint, knip, typecheck and the React Compiler check.

• As a purely visual fix, it ships with captures and no test, per AGENTS.md. Not checked: mobile, which renders this footer separately.

Written by Claude Opus 5.5 in Claude Code, running inside T3 Code.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at 2c0ca28

Macroscope's review found this PR approvable — Adjusts chat timeline divider labels to align with the adjacent text baseline while preserving centered icons. The change is limited to presentation, with no changes to product defaults, actions, or data handling.

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

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The timeline divider label row now uses baseline alignment instead of centered alignment. The icon’s own self-centering remains unchanged.

Changes: Timeline divider alignment

Layer / File(s)	Summary
Label row alignment apps/web/src/components/chat/TimelineSystemDivider.tsx	The label row changes to baseline alignment. The icon retains its existing self-centering.

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

Change: Bug fix · Severity of issue fixed: Low

Possibly related PRs

• pingdotgg/t3code#27399: Adds the wrapDetail prop to TimelineSystemDivider, which is used by the wrapped sentence affected by this alignment change.

Suggested labels: bugfix, size:XS

Suggested reviewers: yash-singh1, voltcrash

Merge Risk: Minimal · up to 2c0ca

This is a small cosmetic fix that aligns the interruption footer label with its reason text. It has no functional, data, or security impact and is safe to merge.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title names the actual change: the interruption footer label's alignment is fixed so it sits on the reason's baseline. The raw summary confirms the only code change is items-center to items-baseli…
Description check		The description follows the template's sections: Problem, Change, Scope and approval, and Verification. The Problem section explains the 2px baseline mismatch and cites #34649 and issue #34684. The Ch…
Linked Issues check		[#34684] Expected behavior: the bold "Run interrupted" label and the reason sit on one baseline. The diff changes one class in TimelineSystemDivider.tsx, items-center to items-baseline, on the `…
Out of Scope Changes check		The reviewed diff against the merge base (a21b43f) touches one line in apps/web/src/components/chat/TimelineSystemDivider.tsx. The change is the alignment fix that issue #34684 requests. It adds n…

Full details: Title check

Explanation

The title names the actual change: the interruption footer label's alignment is fixed so it sits on the reason's baseline. The raw summary confirms the only code change is items-center to items-baseline in TimelineSystemDivider.tsx, which matches the title's scope. The title is 65 characters, a single sentence, and uses the conventional commit form the template asks for.

Full details: Description check

Explanation

The description follows the template's sections: Problem, Change, Scope and approval, and Verification. The Problem section explains the 2px baseline mismatch and cites #34649 and issue #34684. The Change section explains the items-center to items-baseline swap and why the icon stays centered. Scope gives a justification for a small visual fix with no prior issue discussion beyond the linked issue. Verification gives before and after measurements on main and on the branch, dimensions tested, and a note on what was not checked (mobile). The description does not link the issue's maintainer approval comment, so the Scope section relies on the issue report rather than explicit maintainer approval of direction. That is a minor gap against the template's wording. The description also includes the model attribution the template requests. Overall the description is mostly complete.

Full details: Linked Issues check

Explanation

[#34684] Expected behavior: the bold "Run interrupted" label and the reason sit on one baseline. The diff changes one class in TimelineSystemDivider.tsx, items-center to items-baseline, on the inline-flex label span. The label box then takes its baseline from its text rather than from the icon's bottom edge, which was the stated cause of the 2px offset. The issue asks for a cosmetic fix. No coding requirement in the issue calls for an automated test. The PR reports rendered before and after measurements (cap top 48 and baseline 63 on this branch, matching the reason at 780px and 480px). I did not render the change, so those measurements are taken from the PR description. The source change matches the stated cause and fix.

Full details: Out of Scope Changes check

Explanation

The reviewed diff against the merge base (a21b43f) touches one line in apps/web/src/components/chat/TimelineSystemDivider.tsx. The change is the alignment fix that issue #34684 requests. It adds no other behavior, files, or refactoring. The PR states that the icon keeps its existing self-center class. I did not separately inspect that class in the file, but the diff shows the icon's class is unchanged.

Finishing Touches

Generate unit tests (beta)

• Create a new PR

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

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: a21b43f
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 12454ad8-939e-4211-9662-48184cb942b3

Commits

Reviewing files that changed from the base of the PR and between a21b43f and 2c0ca28.

Files selected for processing: 1

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

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

[juliusmarminge]

Evidence

In the real web app, start a replay turn, stop it through MCP with a reason, and inspect the interruption footer at 1600×800 and 640×800 in light theme. Fresh synthetic data on both commits. Base raises the label by 2 CSS pixels; head aligns it with the reason in both cases. Details below are enlarged 3×.

Before	After
a21b43fc70	2c0ca28319
Wide:	Wide:
Narrow:	Narrow:

App context: before wide, after wide, before narrow, after narrow.

Scenario driver · Runtime transcript

The footer was created by an authenticated MCP stop of a replay turn; parent-child delegation was not exercised. AI-assisted; verified with the tests and tools listed above.

Not shown:

• The parent-child delegation flow was not exercised; an authenticated MCP client stopped an active replay thread to produce the real interruption footer.
• Desktop was not run; evidence covers the real web client.