[DoodleBears]

Requested by Vain · project thread

Why the change

On iOS 18 (iPhone XS Max) the chat header shows a frosted band with a hard bottom edge, and Back hugs the screen edge. iOS 26/27 don't show either. Cause: before iOS 26 the chat set headerBlurEffect: 'systemChromeMaterial' (UIKit's bar material, since there's no Liquid Glass), and UIKit's back button sits 8pt from the edge.

Refs #2344

Special things to note

• Merge risk: low, iOS < 26 only for the header (iOS 26+ keeps the native glass header and UIKit edge effect unchanged; Android unchanged). Revert is a single commit. Review focus: swipe-back on iOS 18 now that the native back button is hidden in favour of a custom bar item.
• Verification: vitest for apps/mobile (1031 tests pass after merging main), tsc --noEmit, oxlint, oxfmt --check, source policy; CI green. New tests cover: iOS 26 keeps native Back and no drawn top fade; before iOS 26 no blur effect, native back hidden, round Back item present, top fade height = header + edgeFade.reach. iOS 27 Simulator regression check passes (shot below).
• Not yet run: iOS 18 light/dark screenshots and the swipe-back check. Xcode 27 on the QA Mac cannot download an iOS 18 Simulator runtime, so Vain chose to merge first and run them on the XS Max (iOS 18.1.1) in the next batched device run on main.
• The text visible below the composer in the reported screenshot came from the Mobile DM holds 120 FPS in a Release build while streaming and scrolling history #1845 Release build of 28d81b5, which predates fix(mobile): hold the chat's bottom mask solid up to just under the composer capsule #2456 (bottom mask overlaps the screen edge). The white area right of the messages is the bot bubble's 80% max width, not a gap.
• CI test plan: affected (mobile only).

Change outline

Before iOS 26:

• Header bar is transparent with no UIKit material; the top edge uses the same drawn EdgeFade as Android (solid across the status bar, curve clears edgeFade.reach below the header).
• Back, title chip and computer button are the opaque islands Android already uses (headerGlassFill), as custom bar items, so Back gets the bar's standard leading margin. New headerIslands flag in header-kind.ts (Android, or iOS < 26).
• DESIGN.md chat header section updated.

iOS 27 regression (unchanged native glass header):

iOS 18 light/dark: follow-up from the XS Max batch run.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Q2peBu5V6uF4Woh6wjh7Sj

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

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

Device check on iPhone XS Max, iOS 18.1.1: PASS, with one visual nit

Tested on main 2b82975 (Release, app and Host), in the Xiaoce DM scrolled to mid-history, light and dark.

• No frosted band behind the header: PASS.
• Messages fade out under the status bar and header: PASS.
• Back is a round frosted island inset from the edge, and the title chip and computer button match it: PASS.
• Left-edge swipe-back returns to Chats: PASS.

Nit, clearer in dark: the islands are very translucent and the fade is weakest at the chip's band (about y 90–120 pt). So message text behind the "Xiaoce" chip stays legible and competes with the title. A slightly stronger island fill, or an earlier and steeper top fade, would fix it.

light	dark	top zoom, light	top zoom, dark

---

Generated by Claude Code