fix(native-chat): line Continue up with the chat column

[brennanb2025]

	Files	Added	Deleted	Net
Test	1	$\color{#1a7f37}{\Huge{\mathbf{+}}}$​9	0	$\color{#1a7f37}{\Huge{\mathbf{+}}}$​9
Prod	1	$\color{#1a7f37}{\Huge{\mathbf{+}}}$​22	$\color{#cf222e}{\Huge{\mathbf{−}}}$​20	$\color{#1a7f37}{\Huge{\mathbf{+}}}$​2

ELI5

When Orca (or the server a chat runs on) stops in the middle of an agent's reply, the native chat shows a small Continue button under the cut-off reply. That button sat off to the right, outside the column the conversation and the message box live in, so it looked detached from the chat. It now sits inside that same column, right-aligned with the message box.

What Changed

Before: the Continue row had its own fixed width (max-w-4xl, 56rem) and its own padding. The conversation and the message box use the chat's column width instead (46rem by default, or whatever the user picked in the chat width setting). On any pane wider than the chat column, Continue landed to the right of the transcript and the message box, outside the chat column. With the "full" chat width setting it was the other way round: the chat filled the pane but Continue stayed capped at 56rem.

After: Continue lines up with the right edge of the message box at every chat width setting and pane size.

Mechanism: NativeChatInterruptedContinue now uses the same two-layer layout as the message box (NativeChatComposerField) and the other rows around it: an outer wrapper with the message box's side padding (px-3 sm:px-4), and an inner mx-auto w-full max-w-(--chat-content-max-width) column. --chat-content-max-width is the chat-column width token the native chat sets from the user's width setting. The button, tooltip and screen-reader text are unchanged, only re-indented into the new inner wrapper.

The off-column width came in with #25675, which added the Continue row.

Why

Every other row in the chat (transcript, message box, queued messages, notices, task list, background-tasks strip) sizes itself from --chat-content-max-width. A fixed width on this one row is why it drifted, and it also ignored the user's chat width setting. Using the shared token, not a different fixed number, keeps Continue in the column if that setting or the default ever changes. It copies the message box's padding, not the transcript's (which adds 5px inside the column), because the button is right-aligned and should line up with the message box directly below it.

Linked Issue

None. Visual follow-up to #25675.

Visual Proof

Live desktop app, a chat whose reply was cut off when Orca stopped, with the message box below.

Before: Continue sits to the right of the chat column, past the right edge of the notice and the message box.

After, default chat width: Continue's right edge lines up with the notice and the message box (measured: 1198 px for the button, the chat column and the message box).

After, Full chat width: Continue follows the chat width setting too (all three at 1362 px).

Testing

• Added a test to NativeChatInterruptedContinue.test.tsx that checks the Continue button sits in the shared chat column. It fails on the old markup and passes with this change.

• NativeChatInterruptedContinue.test.tsx and NativeChatStructuredSession.test.tsx pass (40 tests).

• Web typecheck (config/tsconfig.tc.web.json) passes.

• pnpm run check:code-quality:changed passes, and so do all 22 local static-analysis checks from CI (lint, code quality, localization, ratchets).

• I manually tested these changes locally

• Automated tests added/updated, or explained why not below

AI Disclosure

Review

Agent skill upstream boundary

• Not applicable, or this change copies or mechanically translates no upstream skill-installer source, tests, fixtures, registry entries, path tables, comments, or documentation.

Notes

This is a renderer-only layout change (CSS classes), so it is the same on every platform and for local, SSH and paired-server chats. No data, wire or behaviour changes.

Checklist

• This PR is small and focused
• I explained what changed and why (ELI5, the user-facing before/after, the mechanism, and why over the alternatives)
• Before/after screenshots or videos attached for UI changes, or N/A with reason
• Self-reviewed for correctness, security, and performance
• Cross-platform, SSH/remote, and path/shortcut impact considered (or N/A)
• pnpm lint, pnpm typecheck, pnpm test, and pnpm build pass (or CI will cover; local preferred)

[brennanb2025]

Review summary

Problem: after a reply was cut off when Orca stopped, the chat's Continue button sat to the right of the transcript and the message box, outside the chat column. The row had its own fixed width (max-w-4xl) instead of the shared chat column every other chat row uses. So it was also wrong under the chat width setting: with Full width, the chat filled the pane but Continue stayed capped.

Change: the Continue row now uses the same column token (max-w-(--chat-content-max-width)) and the same outer padding as the message box below it. Only the layout wrapper changed; the button, tooltip and behaviour are untouched.

Verified:

• New test: the button sits in the chat column. It fails on the old markup and passes now.
• The component's 15 tests and the structured-session tests pass. The web typecheck and local CI checks (22/22) pass. CI is green.
• Live desktop run with a stand-in agent: Continue's right edge matches the chat column and the message box, at 1198 px with the default width and 1362 px with Full width. Screenshots are in Visual Proof.

Not verified: the phone app, which renders its own layout.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 0f3d9a45-0b8c-4262-bbd7-e0b7bf81d696

---

📥 Commits

Reviewing files that changed from the base of the PR and between 8e4716a and 4b1e66e.

---

📒 Files selected for processing (2)

• src/renderer/src/components/native-chat/NativeChatInterruptedContinue.test.tsx
• src/renderer/src/components/native-chat/NativeChatInterruptedContinue.tsx

---

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

---

---

📝 Walkthrough

Walkthrough

The Continue control now uses an outer wrapper for horizontal padding. Its inner row uses the chat content-width variable instead of a fixed maximum width. A layout test checks that the button’s parent has the expected alignment and width classes. Button, tooltip, and accessible explanation behavior remain unchanged.

---

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to 4b1e6

The change adjusts the Continue control’s alignment without an evidenced impact to chat behavior or data. No actionable merge-blocking risk is established from the supplied change context.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		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 1 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: aligning the native chat Continue control with the chat column.
Description check		The description is mostly complete and covers the user-facing change, implementation, rationale, visual proof, testing, platform considerations, and checklist items. The Linked Issue section does not …
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.

---

---

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

---

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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

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