Synced from GitHub
fix(mobile): the question card uses the whole screen while the keyboard is closed#24363
Unproven: Android. It runs the same height code on its in-flow card, but I couldn't run it on a phone because I had no dev client built for this commit.
Problem
On a short screen like the folded iPhone Duo, an agent question with three short options opens in a card that leaves only a narrow strip to scroll. This happens with the keyboard closed. The card always set aside a keyboard's height (the last seen one, or a 336pt guess) so it would not flash over the header when the keyboard rose. On a 678pt-tall screen that left about 230pt for the whole card.
Change
- The card's max height now comes from the live keyboard frame (
useReanimatedKeyboardAnimation) through a derived value, and the card applies it in an animated style, on the UI thread alongside the sticky composer's translation. With the keyboard closed, the card gets all the room below the header. As the keyboard moves, the card shrinks or grows with it. - The height budget starts from the measured screen height instead of the window height, like the usage panel. Android lays out below its opaque header and reports a zero header height, so the window height overstated the room there.
- The keyboard only counts when the sticky view is lifting the card. Both use one
keyboardStickyEnabledvalue, which keeps the same rule as before. - The card's 200ms layout transition is gone, and its coverage (the feed inset and floating-control lift) is now set directly instead of eased. Both would re-fire on every keyboard frame and trail the card. Before removing it, the recording showed the collapsed bar peeking out below the card at the end of the keyboard rise.
The usage-limits panel still reserves the keyboard as before. It is capped at 40% of the screen and isn't part of this bug.
Scope and approval
Closes #24290. A focused fix in the mobile question card's height. No contract or server changes.
Verification
Tested on the iPhone Duo simulator (outer/folded display). The app was connected to a dev server, with a Claude thread that asked the issue's exact question and options.
| Before (main) | After (this PR) |
|---|---|
Before: the options are cut off under the question. After: all three options, the custom answer field and Submit fit.
Tapping the custom answer field opens the keyboard, and Return closes it. The card's top stays under the header while its bottom follows the keyboard, both ways. I checked each frame. The "Continue" panel at the end is iOS's own keyboard tip.
https://github.com/user-attachments/assets/bddade68-c9ed-4383-b17a-dc0bbf12ddd3
vp run check:changedpasses (format, lint, knip, typecheck).vp test run src/reactCompilerCoverage.test.tspasses.- Not checked: Duo sidebar search with the card open, and the unfolded Duo.
Fix and verification by Claude Opus 5.5 in Claude Code.
🤖 Generated with Claude Code
Checks
21 successful · 15 skipped
Added 1 commit
- fix(mobile): the question card uses the whole screen while the keyboard is closed0ca22a8
Synced from GitHub
Approvability
Verdict: Approved at b20846f
Macroscope's review found this PR approvable — This is a focused mobile UI fix that synchronizes the existing question card’s height with the live keyboard animation, while preserving the existing iOS and Android layout paths. The changes are isolated to layout and animation behavior with no API, schema, security, billing, deployment, or product-default impact.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review.
External image Recent review info
External image Run configuration
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: main
- File: .coderabbit.config.ts
- Commit: 6e79211
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Advanced
- Run ID:
e637ed1a-c492-4af1-89f4-e8098838430d
External image Commits
Reviewing files that changed from the base of the PR and between b20846f4c897bb31a3c892b49855fd2b57d53c8a and 1b281e077f25c61d3ce017abc30c74ece135ccae.
External image Files selected for processing: 1
apps/mobile/src/features/threads/ThreadDetailScreen.tsx
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.
Walkthrough
The pending question card derives its maximum height from keyboard animation translation when sticky behavior is enabled. Animated styles apply the height to the card and the iOS overlay.
Changes: Question card sizing
Layer / File(s) Summary Derive height from keyboard animation
apps/mobile/src/features/threads/ThreadDetailScreen.tsx,apps/mobile/src/features/threads/pendingUserInputLayout.tsThreadDetailScreenderives the pending question card’s maximum height from keyboard translation when sticky behavior is enabled. It uses the same platform-specific conditions to setkeyboardStickyEnabledand configureKeyboardStickyView. The height calculation is marked as a worklet.Apply animated card and overlay heights
apps/mobile/src/features/threads/PendingUserInputCard.tsxPendingUserInputCardaccepts a ReanimatedDerivedValue<number>formaxHeight. Animated styles apply the maximum height to the card and the height to the iOS overlay. Coverage updates assign the nonnegative card height minus the bar height directly, without timed easing.Priority: External image Normal
Estimated code review effort: 3 (Moderate) | ~20 minutes
Change: Bug fix · Severity of issue fixed: Medium
Sequence Diagram(s)
mermaid1 sequenceDiagram 2 participant ThreadDetailScreen 3 participant KeyboardAnimation 4 participant PendingUserInputCard 5 ThreadDetailScreen->>KeyboardAnimation: Read UI-thread keyboard translation 6 KeyboardAnimation-->>ThreadDetailScreen: Provide translation 7 ThreadDetailScreen->>ThreadDetailScreen: Derive maximum height 8 ThreadDetailScreen->>PendingUserInputCard: Pass derived maximum height 9 PendingUserInputCard->>PendingUserInputCard: Apply animated height styles Possibly related issues
- pingdotgg/t3code#24291: This issue concerns the browser tab pill overlapping the expanded question panel. The PR changes panel height but does not change pill positioning.
Suggested reviewers:
maria-rcks,juliusmarminge,pixpmusic
Merge Risk: External image Low · up to 1b281
The question card now sizes itself from the live keyboard frame. The author verified this on the iPhone Duo simulator but not on Android. Check keyboard-open behavior on an Android phone before merging, because a sign mismatch would make the card ignore the keyboard there.
Pre-merge checks: Passed 4
Check name Status Explanation Title check Passed The title names the main change: the question card's height no longer reserves keyboard space, so it uses the whole screen while the keyboard is closed. It follows conventional commit form and matches… Description check Passed The description follows the template. It has a Problem section with the folded iPhone Duo scenario and the 678pt screen math. It has a Change section that explains the derived keyboard height, the mea… Linked Issues check Passed Issue #24290is the only active directly linked issue.ThreadDetailScreen.tsxnow derives the card height from measured screen height and the live Reanimated keyboard translation. The shared `keyboa…Out of Scope Changes check Passed The changes stay within the mobile question-card height and keyboard-animation fix for issue #24290. TheThreadDetailScreen.tsxchanges provide the measured-height and shared sticky-enable inputs. T…Full details: Title check
Explanation
The title names the main change: the question card's height no longer reserves keyboard space, so it uses the whole screen while the keyboard is closed. It follows conventional commit form and matches the objectives, which describe the card height calculation, live keyboard frame, and removal of the layout transition.
Full details: Description check
Explanation
The description follows the template. It has a Problem section with the folded iPhone Duo scenario and the 678pt screen math. It has a Change section that explains the derived keyboard height, the measured screen height, the shared keyboardStickyEnabled rule, and the removed layout transition. It has a Scope and approval section that links
#24290and states the change is focused with no contract or server changes. It has a Verification section with before/after screenshots, a recording, the commands run, and items not checked. The author also flags Android as unproven. Scope is a judgment call: the approval text cites the issue but does not link a maintainer approval comment, which the template asks for on a non-trivial fix. This is a minor gap, so the description is mostly complete.
Full details: Linked Issues check
Explanation
Issue
#24290is the only active directly linked issue.ThreadDetailScreen.tsxnow derives the card height from measured screen height and the live Reanimated keyboard translation. The sharedkeyboardStickyEnabledvalue makes the keyboard reserve zero space when the sticky view is disabled. The card applies the derived height on the UI thread with the sticky translation.PendingUserInputCard.tsxremoves the repeated layout transition and updates coverage directly, so the card and its controls track keyboard frames. The PR reports that all three options, the custom answer field, and Submit fit on the folded iPhone Duo with the keyboard closed. The reported changed-file checks and compiler coverage test pass.
Full details: Out of Scope Changes check
Explanation
The changes stay within the mobile question-card height and keyboard-animation fix for issue
#24290. TheThreadDetailScreen.tsxchanges provide the measured-height and shared sticky-enable inputs. The card and layout helper changes support UI-thread height updates and remove animation lag. The usage-limits panel behavior remains unchanged. No contract, server, or unrelated feature changes are identified.
Finishing Touches
🧪 Generate unit tests (beta)
- Create a new PR
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
Added 2 commits
Synced from GitHub
Added 1 commit
- Merge branch 'main' into issue-watch/242901b281e0