Mobile: grow the composer smoothly up to five lines, then scroll

[DoodleBears]

Requested by Vain · project thread

Before: the mobile chat composer jumped to its new height with each new line and capped at about five and a half lines (touch * 3).

After: like Slack, the composer grows one line at a time up to five lines and then scrolls inside the field. Each height change slides over 160 ms on the UI thread, the same for typed text and dictated text, and shrinks the same way after sending.

How: the pill is now a Reanimated Animated.View whose height follows its content. The content sits in an inner view anchored to the bottom; its onLayout (which fires only when the height changes, not on every keystroke) sets a shared value with withTiming, so no React render runs per animation frame. Typing and dictation both reach the field through value, so both take the same path. The five-line cap is composerFieldHeight in dictation.ts, with a unit test. Reduce Motion follows the system setting. DESIGN.md's motion list now names the composer, and motion.composer is a new token.

Evidence (web export, isolated Host, 390 × 844)

Pill height by line count: 1: 50, 2: 108, 3: 130, 4: 152, 5: 174, 6: 174, 7: 174 (line 2 adds the button row when the field stacks). Per-frame heights while line 3 → 4 animates: 130.2, 131.2, 133.2, 136.2, 140, 144.3, 147.7, 150.1, 151.5, 152 (eased, no jump). Light and dark screenshots at 1, 3, 5 and 7 lines are in the project thread; native screenshots and a recording are queued on the shared Simulator and will follow as a comment.

Human QA

• iOS dev build: type 1–7 lines, watch each line slide in; line 6 scrolls inside the field.
• Dictate a long sentence: the composer grows the same way as typing.
• Send: the composer shrinks back smoothly.

Checks: pnpm --filter @botharness/mobile typecheck, mobile vitest (278 passed), pnpm lint, pnpm format:check. JavaScript-only change; the installed dev build reloads through Metro.

🤖 Generated with Claude Code

https://claude.ai/code/session_01JrDYoWwyZq8wZicrR3aQFB

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 54 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 60715afa-e673-49a7-a2a6-72f5b55babc6

📥 Commits

Reviewing files that changed from the base of the PR and between dbfbe05 and aa3e9ab.

📒 Files selected for processing: 7

• apps/mobile/DESIGN.md
• apps/mobile/src/ui/chat/composer.tsx
• apps/mobile/src/ui/chat/dictation.ts
• apps/mobile/src/ui/design/tokens.ts
• apps/mobile/test/composer-dictation.test.tsx
• apps/mobile/test/dictation.test.ts
• changes/1886-mobile-composer-five-lines.md

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

[DoodleBears]

Batch QA — head aa3e9ab (on qa/batch-3 = main dbfbe05 + #1878/#1885/#1899 combos + #1716 #1874 #1884)

iOS Simulator "PR1800 glass" (iOS 26.0, iPhone 17 Pro), dev client rebuilt from the batch, QA Host on DeepSeek. Screenshots are redacted (computer name, tailnet host and local paths blacked out). Chinese text renders as □ because the iOS 26.0 Simulator runtime ships without PingFang; that is an environment limit, not the app. Android: untested.

Step	Result
1. 1 → 7 lines: grows to 5 lines, then scrolls inside (light + dark)	✅ pass
2. Typing video lines 1–7	✅ recorded locally; stepwise growth, no jumps/flicker seen
3. Dictation	untested on the Simulator (check on a real iPhone)
4. Send shrinks back to one line	✅ pass

Note: the previous head f4d3045 failed step 1 together with #1889 (pill stuck at ~2 lines); aa3e9ab fixes that.