[DoodleBears]

Requested by Vain · project thread

Why the change

With a 4-line draft the chat's bottom mask (#2398, softened in #2425) curves from the screen edge to edgeFade.reach above the composer, so it hides messages well above the capsule. Vain wants the line where messages are fully covered to sit just under the top of the composer capsule, at the same place for a 1-line or 4-line draft.

Refs #2398, #2425

Special things to note

• Merge risk: chat bottom mask only (iOS and Android share it); the top mask under Android's floating header is unchanged apart from the 1pt overlap past the screen edge. Revert = this PR.
• Verification: tsc, pnpm lint, mobile vitest (994 passed, 9 skipped). iOS 27 Simulator at fb01b34, keyboard closed, light and dark: empty composer and 4-line draft pass (messages readable up to the capsule's top, short fade only there). A 1px row at the very bottom showed content with the 4-line draft; 29cc6e8 overlaps the mask 1pt past the screen edge with its height rounded up (recheck pending). Not run: Android, keyboard-open states (the iOS 27 Simulator cannot show a software keyboard), large text.
• CI test plan: affected (mobile source, test, DESIGN.md).

Change outline

• EdgeFade takes an optional solid length (defaults to the safe-area inset as before), rounds its height up and overlaps 1pt past the screen edge.
• ConversationScreen: the bottom mask is solid from the screen edge to space.x2 below the capsule's top (composerHeight − space.x3 − space.x2), then clears over edgeFade.bottom above that.
• DESIGN.md describes the new bottom mask; the navigation test expects the new fade height.

	Light	Dark
Empty composer
4-line draft

🤖 Generated with Claude Code

https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg

[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 13 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 2 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 099285f9-81eb-46c5-b9fb-8193346e20bc

📥 Commits

Reviewing files that changed from the base of the PR and between 00b84ee and 29cc6e8.

⛔ Files ignored due to path filters: 5

• .github/pr-screenshots/2456/draft4-bottom-edge-zoom-light.png is excluded by !**/*.png
• .github/pr-screenshots/2456/draft4-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2456/draft4-light.png is excluded by !**/*.png
• .github/pr-screenshots/2456/empty-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2456/empty-light.png is excluded by !**/*.png

📒 Files selected for processing: 4

• apps/mobile/DESIGN.md
• apps/mobile/src/ui/chat/conversation-screen.tsx
• apps/mobile/src/ui/chat/header-chrome.tsx
• apps/mobile/test/conversation-navigation.test.tsx

• 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]

iOS 27 Simulator at fb01b34: pass. This ran in a Bot DM with long history, scrolled up, with the keyboard closed.

• Empty composer: pass, in light and dark. Messages stay readable right up to the top of the capsule. The fade is short, only about the last 10 pt.
• 4-line draft: pass, in light and dark. The mask stops at the top of the taller capsule, with the same short fade.
• Nit: with the 4-line draft, the bottom 1 px row of the screen shows message content under the mask, in light and dark. With an empty composer, that row is clean.

	Empty	4-line draft
Light
Dark

---

Generated by Claude Code