Fix: Web - RHP - Create expense RHP misalignment when quickly creating per diem expense - #97754
Fix: Web - RHP - Create expense RHP misalignment when quickly creating per diem expense#97754annaweber830 wants to merge 3 commits into
Conversation
The react-native-tab-view pager clip container picked up a stray scrollLeft from the auto-focused Search input while the RHP was translated wide, shifting the active per-diem page left and clipping the first letters of country names. Pin the pager scrollLeft to 0 on web.
…1610-perdiem-pager-scrollleft
|
|
|
@mananjadhav Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6dccd5f1f8
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| + // is translated wide, leaving a persistent scrollLeft that shifts the active page left and clips its | ||
| + // first column. Pin scrollLeft at 0. | ||
| + React.useEffect(() => { | ||
| + if (Platform.OS !== 'web') { |
There was a problem hiding this comment.
When this patch is applied, every TabView mount will run this effect and evaluate Platform.OS, but the hunk does not add Platform to TabView.js's React Native import. Since Platform is not otherwise defined in this module, the app will throw a ReferenceError as soon as any patched tab view mounts instead of just fixing the web scroll offset.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
This one's a false positive I think — TabView.js already imports Platform up top (line 4, import { I18nManager, Platform, StyleSheet, View } from 'react-native') and already uses it elsewhere in the file, like the RTL check around line 36. So the patch is just adding another Platform.OS check where it's already in scope, no ReferenceError.
1 participant
Explanation of Change
Adds a patch-package patch to react-native-tab-view@4.3.0 that pins the pager's overflow: hidden clip container scrollLeft to 0 on web (via a scroll listener, cleaned up on unmount).
How it addresses the issue: Selecting the Per Diem tab auto-focuses the Destination search input. On web, that focus scrolls the pager container horizontally, leaving a stray scrollLeft. Because the pager positions its pages with translateX and never with scroll, that leftover offset shifts the active page left and clips its first column (the RHP misalignment in the issue). Pinning scrollLeft to 0 removes the offset, so the page stays aligned.
Fixed Issues
$ #91610
PROPOSAL: #91610 (comment)
Tests
Offline tests
Same as test
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.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
Screen.Recording.2026-08-03.at.9.20.33.PM.mp4