feat(mobile): float the Android chat header and mask both chat edges like iOS by DoodleBears · Pull Request #2394 · BotHarness/DeepSeekBot

DoodleBears · 2026-10-20T10:11:56Z

Requested by Vain · project thread

Why the change

On Android the chat's bottom fade stopped above the composer (messages under the + stayed fully visible), the header was a flat Material bar, and + had no container. iOS already matches the Grok reference; this brings Android in line / 安卓聊天页底部渐变卡在输入框上方，顶部是平铺的 Material 栏，+ 没有背景；对齐 iOS 已实现的 Grok 设计。

Special things to note

Merge risk: JS-only, Android-only (Platform.OS === 'android'). iOS and web paths are unchanged.
Native support: Android has no system scroll edge effect like iOS's. Material 3 only tints the top app bar on scroll, and ScrollView's fadingEdgeLength fades content linearly at the scroll view's own bounds, so it can't keep what passes under floating chrome hidden. So Android keeps a drawn fade, now as a mask layer between the list and the composer/header.
Bottom fade: the gradient now always runs 0 → 1, with the stops mirrored for the bottom edge. Phone QA showed text still visible under the composer. The root cause was the SVG's height="100%" keeping its first, shorter height. fix(mobile): draw the chat's bottom mask on iOS instead of UIKit's edge effect #2398 fixed that on main by sizing the SVG to its height.
Verification: typecheck, unit tests, lint and CI were green. Phone QA is below.

Change outline

Header (Android): headerTransparent, with a round Back, the avatar+name chip as its own island and a round computer button. The list pads its own top by the header height.
Edges (Android): EdgeFade gains cover + color. It stays nearly opaque under the composer/header, then runs the light edgeFade curve, in the chat's background colour. A top fade is added.
Composer (Android): + is filled on the field's raised fill.

Phone QA (Xiaomi, Android 16 / HyperOS 3, release build)

	Light	Dark
DM, newest message	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/dm-latest-light.png?raw=true"` width="240">	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/dm-latest-dark.png?raw=true"` width="240">
DM, scrolled	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/dm-scrolled-light.png?raw=true"` width="240">	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/dm-scrolled-dark.png?raw=true"` width="240">
Coloured background, scrolled	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/dm-colored-scrolled-light.png?raw=true"` width="240">	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/dm-colored-scrolled-dark.png?raw=true"` width="240">
Group header	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/group-header-light.png?raw=true"` width="240">	<img src="`https://github.com/BotHarness/DeepSeekBot/blob/daa30b764d884169c461f3a6af29df253e61f5a9/.github/pr-screenshots/2394-android-chat-chrome/phone/group-header-dark.png?raw=true"` width="240">

QA findings:

In the scrolled shots, text shows under the composer. That is the stale SVG height, which fix(mobile): draw the chat's bottom mask on iOS instead of UIKit's edge effect #2398 fixed on main. A re-shot is requested.
After a theme switch inside the chat, the name chip clips to "M…" (finding-name-capsule-clipped-after-theme-switch-light.png). The fix is in fix(mobile): remount the Android chat title when its theme or name changes #2416.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn

…like iOS Android's chat header now floats over the messages with a round Back, the title chip as its own island and a round computer button. The drawn edge fade becomes a mask layer between the list and the floating chrome: nearly opaque under the composer and the header, then the light edge curve, in the chat's own background colour, with an explicit top-to-bottom gradient so it no longer renders reversed above the composer. The composer's + is a filled round button on the field's raised fill. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn

coderabbitai · 2026-10-20T10:12:04Z

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 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: 8e50c653-8238-4db9-9fb6-fff68056edfa

📥 Commits

Reviewing files that changed from the base of the PR and between 37a039a and 4b60252.

📒 Files selected for processing: 14

apps/mobile/DESIGN.md
apps/mobile/src/ui/chat/channel-title.tsx
apps/mobile/src/ui/chat/chat-title.tsx
apps/mobile/src/ui/chat/composer-chrome.tsx
apps/mobile/src/ui/chat/conversation-screen.tsx
apps/mobile/src/ui/chat/edge-fade.ts
apps/mobile/src/ui/chat/header-chrome.tsx
apps/mobile/src/ui/chat/native-header.ts
apps/mobile/src/ui/design/tokens.ts
apps/mobile/src/ui/open-full-client.tsx
apps/mobile/test/conversation-navigation.test.tsx
apps/mobile/test/conversation-streaming-rows.test.tsx
apps/mobile/test/edge-fade.test.ts
changes/2394-android-chat-chrome.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

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

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn

Captured on the Xiaomi phone (Android 16, HyperOS 3, zh-CN) running a Release build of main d220792, light and dark: a Bot DM at its newest message and scrolled so text passes under the composer and the header, the same on a solid colour chat background, the group chat header and a held back gesture. finding-name-capsule-clipped-after- theme-switch-light shows the name capsule truncated after a dark-to-light switch while the app was open; it renders correctly after a restart. Status bar redacted. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn

…anges (#2416) * fix(mobile): remount the Android chat title when its theme or name changes The floating header's title chip kept the width it was first measured at, so after switching between light and dark in the chat it clipped the Bot's name to its first letter. Keying the title on the scheme, font scale and name makes the native header measure it again. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn * docs(changes): Android chat title fragment Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn * docs(pr-screenshots): Android phone QA shots for #2394 Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn --------- Co-authored-by: Claude <noreply@anthropic.com>

DoodleBears · 2026-10-20T16:07:06Z

Android phone result (Xiaomi, Android 16 / HyperOS 3, isolated QA Host, deepseek-v4.1-flash), release build of main d220792

Screenshots: 2394-android-chat-chrome/phone (commit 90552c1): DM at rest and scrolled, on default and coloured backgrounds, group header and back gesture, light and dark.

Findings: the name chip collapsed to "M…" after a theme switch inside the chat (finding-name-capsule-clipped-after-theme-switch-light.png), and in dark on a coloured background text showed below the composer (dm-colored-scrolled-dark.png). The build predates #2398, which fixes the latter; #2416 addresses the chip and will be checked on the phone.

Generated by Claude Code

Keep main's floating Android header fill (#2394); this PR now only swaps Back to the Material arrow. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbudM552v4qrLMzopz7j7k

docs(changes): Android chat chrome fragment

4b60252

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn

DoodleBears self-assigned this Oct 20, 2026

DoodleBears marked this pull request as ready for review October 20, 2026 10:21

DoodleBears merged commit a6bb3d6 into main Oct 20, 2026
11 checks passed

DoodleBears mentioned this pull request Oct 20, 2026

fix(mobile): draw the chat's bottom mask on iOS instead of UIKit's edge effect #2398

Merged

DoodleBears mentioned this pull request Oct 20, 2026

fix(mobile): remount the Android chat title when its theme or name changes #2416

Merged

DoodleBears pushed a commit that referenced this pull request Oct 20, 2026

docs(pr-screenshots): Android phone QA shots for #2394

daa30b7

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QxWnExdvT58a8MeXHJ7aRn

DoodleBears mentioned this pull request Oct 20, 2026

fix(mobile): soften the chat edge fades and space the Android header shapes #2425

Merged

DoodleBears mentioned this pull request Oct 21, 2026

fix(mobile): Android Back uses the Material arrow #2358

Merged

Navigation Menu

Repository navigation

feat(mobile): float the Android chat header and mask both chat edges like iOS - #2394

feat(mobile): float the Android chat header and mask both chat edges like iOS#2394
DoodleBears merged 2 commits into
mainfrom
claude/project-thread-rfizz4

DoodleBears commented Oct 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading

Review limit reached

Uh oh!

Uh oh!

DoodleBears commented Oct 20, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

DoodleBears commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why the change

Special things to note

Change outline

Phone QA (Xiaomi, Android 16 / HyperOS 3, release build)

Uh oh!

coderabbitai Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

Uh oh!

DoodleBears commented Oct 20, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DoodleBears commented Oct 20, 2026 •

edited

Loading

coderabbitai Bot commented Oct 20, 2026 •

edited

Loading