Fix Pronouns page Save button hidden by Android navigation bar#93773
Conversation
Co-authored-by: truph01 <truph01@users.noreply.github.com>
|
I created this PR from an upstream branch since I don't have push access to your fork. To take ownership of this branch and be able to push updates, run: Then you can close this PR and open a new one from your fork. |
|
The only failing check is This check fails because the PR template requires a human co-author to:
These items can't be completed by MelvinBot — they need the human co-author to verify and tick. Once you fill those out, the checklist check will pass. There's nothing to fix in the code: the actual code/lint/typecheck/test jobs are not failing. |
|
@MelvinBot Mark this PR as ready for review |
|
@MelvinBot The current implementation works well when the keyboard is not open. However, while the keyboard is opening, an extra unnecessary space is added below the button. |
Co-authored-by: truph01 <truph01@users.noreply.github.com>
|
Fixed in d04f839. Cause: The Save button lives in a Fix: Skip the footer's safe-area padding while the keyboard is shown, mirroring the existing logic the list already uses for its non-footer container at
addBottomSafeAreaPadding={!isKeyboardShown && addBottomSafeAreaPadding}When the keyboard is closed, behavior is unchanged — the button still clears the Android navigation bar (the original fix). When the keyboard is open, the extra space is gone. Checks run locally
|
|
@MelvinBot What about adding in that page? |
|
Good question, but Why the current approach is correct: The
Two more reasons
|
|
The failing checks are not caused by this PR's changes, so I won't push a code fix. 1. The failing test is:
This PR only changes two UI files — Recommendation: Merge the latest 2. This is the |
|
@MelvinBot However, the current change modifies |
|
You're right to scrutinize a shared-component change, but the blast radius here is narrow and the change actually makes What the change affects: The new gate only changes a render when all three conditions hold at once:
In every other case ( Why it's low-risk: Other consumers that hit this pathScreens passing On validation: This is a native safe-area concern (Android nav bar / iOS home indicator). On web there is no bottom safe-area inset, so My recommendation is to keep the change as-is and validate on Android/iOS native per the QA steps. Happy to adjust if you'd rather take the scoped-but-buggier route. |
|
@MelvinBot After testing your solution, I noticed that the Save button's position behaves oddly. When the keyboard transitions from closed to open, the button briefly appears in the wrong position before moving to the correct one. So I think it'd be safe if we switch to this approach #93773 (comment) |
Switch from passing addBottomSafeAreaPadding through SelectionList/FixedFooter to enabling includeSafeAreaPaddingBottom on the ScreenWrapper, which integrates with the wrapper's keyboard avoidance and avoids the Save button briefly jumping to the wrong position on keyboard open. Reverts the SelectionList keyboard hack. Co-authored-by: truph01 <truph01@users.noreply.github.com>
|
Done — switched to this approach in The page's Changes:
Verification: |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-06-17.at.16.21.15.movAndroid: mWeb ChromeiOS: HybridAppScreen.Recording.2026-06-17.at.16.23.13.moviOS: mWeb SafariMacOS: Chrome / Safari |
|
@MelvinBot Update the tests and QA tests sections: |
📱 Mobile QA — Before/After verificationVerdict: ✅ PASS — the fix resolves the bug. On the PR branch the Save button on the Pronouns page clears the Android navigation bar, while on Context
Repro steps (from the issue)
Environment
❌ Before —
|
| Save button vs nav bar | Outcome | |
|---|---|---|
main |
overlaps nav bar (0.950–0.979) — label cut off |
❌ bug reproduced |
| PR branch | clears nav bar (gap 0.927→0.950) |
✅ fixed |
Actual → Expected delta confirmed: the Save button moves up by the bottom safe-area inset and is no longer hidden by the device navigation bar. PASS.
🤖 Automated mobile QA run (Android native, before/after on main vs PR via Argent). Web/mWeb out of scope (issue reproduces on Android App only). Inline GIFs are the tight repro action; the linked MP4s carry ~20s of lead-in/aftermath context (compressed ~540p).
|
🚧 @lakchote has triggered a test Expensify/App build. You can view the workflow run here. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/lakchote in version: 9.4.10-0 🚀
Bundle Size Analysis (Sentry): |
|
🤖 I reviewed the changes in this PR and no help site updates are required. This is a UI-only fix: it flips Since there's nothing to document, I did not create a draft docs PR. @truph01, no linked help site PR was created because this change doesn't affect any documented behavior. Let me know if you'd still like a docs PR for anything specific. |
|
🚀 Deployed to staging by https://github.com/lakchote in version: 9.4.12-0 🚀
Bundle Size Analysis (Sentry): |
|
🤖 Help site review: no changes required. This PR is a UI-only safe-area fix — it changes Help-site articles document product behavior and workflows, not pixel-level layout/safe-area adjustments, so there's nothing to update here. No draft docs PR was created. @truph01, please confirm you agree no help site changes are needed. If you believe an article should be updated, let me know which behavior is affected and I'll create the draft PR. |
|
🚀 Deployed to staging by https://github.com/lakchote in version: 9.4.14-0 🚀
Bundle Size Analysis (Sentry): |




Explanation of Change
The
Savebutton on the Pronouns page renders inside aFixedFooter(viaSelectionList'sconfirmButtonOptions). The page'sScreenWrapperusesincludeSafeAreaPaddingBottom={false}, and theSelectionListwas not passingaddBottomSafeAreaPadding(which defaults tofalse). With no bottom safe-area inset from either source, the Save button sat flush against the bottom edge and was hidden behind the Android device navigation bar.This adds
addBottomSafeAreaPaddingto theSelectionList, routing the safe-area inset throughFixedFooterso the Save button clears the navigation bar. This matches the established pattern used byRulesReimbursableDefaultPage(changed in the same PR that introduced this regression).Fixed Issues
$ #93738
PROPOSAL: #93738 (comment)
Tests
Precondition: Set device navigation to bar instead of gestures.
Offline tests
N/A — UI-only safe-area padding change.
QA Steps
Precondition: Set device navigation to bar instead of gestures.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari