Repository navigation
fix(mobile): draw the chat's bottom mask on iOS instead of UIKit's edge effect - #2398
Merged
Merged
Conversation
…mposer With the keyboard closed and a wrapped (or large-text) draft, UIKit's bottom scroll edge effect leaves the strip below the composer capsule unsoftened, even when the scroll edge interaction is re-added. Draw the bottom fade over only that strip in that state; every other state keeps the native edge effect alone. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
📝 Walkthrough
Merge Risk: ⚪ Minimal · up to
|
| 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 2 functions across 2 files. (2 skipped: 2 … | Write docstrings for the functions missing them to satisfy the coverage threshold. |
-
Check name Status Explanation 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. Title check The title clearly identifies the main change: replacing UIKit’s iOS chat bottom edge effect with a drawn mask. Description check The description includes the required purpose, references, risks, verification results, CI plan, change outline, and before/after UI evidence. It also identifies unverified Android, large and maximum … Full details: Description check
-
Explanation
The description includes the required purpose, references, risks, verification results, CI plan, change outline, and before/after UI evidence. It also identifies unverified Android, large and maximum text sizes, Reduce Transparency, and interactive keyboard-dismissal cases. The native acceptance matrix is not complete because intermediate and maximum text-size coverage, Android coverage, and some requested screenshot evidence remain unverified.
-
Full details: Docstring Coverage
-
Explanation
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 2 functions across 2 files. (2 skipped: 2 unsupported.)
Resolution
Write docstrings for the functions missing them to satisfy the coverage threshold.
- Fix all pre-merge checks with AI
✨ Finishing Touches: 💡 1
-
📝 Generate docstrings: 💡
-
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
-
- 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.
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_01T3dAFSSAHytUi4igDx3iwg
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
DoodleBears
marked this pull request as ready for review
October 20, 2026 10:45
On automatic, UIKit picked the hard style under the resting composer: an opaque band in a different colour from the list with a hairline on top. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…ge effect UIKit picked the hard bottom edge style under the composer (an opaque band in another colour with a hairline on top, at a height that ignored a wrapped draft), and pinning the soft style did not change it. Hide the native bottom edge, drop the scroll-edge-element module, and use the same drawn mask as Android: nearly opaque under the composer, then the light edgeFade curve above it, in the chat's background colour. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
… composer After an interactive keyboard dismissal the percentage-sized SVG kept its old, shorter height, leaving text under the composer uncovered. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
DoodleBears
changed the title
This was referenced Oct 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Vain · project thread
Why the change
On iOS 26+ the native composer (#2355) used UIKit's bottom scroll edge effect through
UIScrollEdgeElementContainerInteraction. UIKit picked the hard style there: an opaque band in a different colour from the message list with a hairline across its top, at a height that ignored a wrapped draft, so with a 4-line draft and the keyboard closed messages showed crisp under the capsule. Re-adding the interaction and pinningscrollEdgeEffects.bottom: 'soft'did not fix it (shots-r2). The target is Grok's chat: messages fade naturally into an almost opaque background under the composer.Refs #2355
Special things to note
scroll-edge-elementnative module is removed (a dev client that still contains it is harmless, nothing calls it). The top edge stays UIKit's automatic effect. Revert = this PR.tsc,pnpm lint, mobile vitest (938 passed, 9 skipped) locally; CI green. Simulator (iOS 27, default text size, light and dark, DM with long history): empty composer with keyboard closed has no hairline and no hard band (r3 on 79c328b, r4 on 3df8ee8); 4-line draft opened fresh is masked under and around the capsule (r3); keyboard open fine; header unchanged.Change outline
ConversationScreen: on iOS 26scrollEdgeEffects: { top: 'automatic', bottom: 'hidden' }; the composer is no longer wrapped inScrollEdgeElement; oneEdgeFadeat the bottom withcover={composerHeight}in the chat's background colour on every platform.EdgeFade: with acover, always draws the gradient mask (not theEdgeMaterialblur), and sizes the SVG to its pixel height so it follows the composer.modules/scroll-edge-elementandui/primitives/scroll-edge-element*.DESIGN.mdand the unreleasedchanges/2355-native-composer.mddescribe the drawn mask.https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2355-native-composer/c17b-b-draft4-nokbd-light.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2355-native-composer/c17b-2-draft4-nokbd-dark.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-empty-composer-scrolled-r4-light.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-empty-composer-scrolled-r4-dark.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-four-line-reopened-scrolled-r3-light.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-four-line-reopened-scrolled-r3-dark.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-four-line-keyboard-open-r3-light.png?raw=true"width="240">https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-four-line-keyboard-open-r3-dark.png?raw=true"width="240">Top-edge crop (r4, light above dark): <img src="
https://github.com/BotHarness/DeepSeekBot/blob/616fe3fb4106721a0a595778ec0f52f85f80f191/.github/pr-screenshots/2398-composer-bottom-fade/2398-empty-composer-top-edge-crop-r4.png?raw=true"width="480">🤖 Generated with Claude Code
https://claude.ai/code/session_01T3dAFSSAHytUi4igDx3iwg