Fix RHP scroll for expenses with many fields on web#83773
Draft
Fix RHP scroll for expenses with many fields on web#83773
Conversation
The web-only overflowY:'auto' on MoneyRequestView created a CSS scroll
container that could intercept wheel events, preventing them from
propagating to the parent InvertedFlatList. Since MoneyRequestView has
no constrained height, this never provided actual scrolling — it only
created a parasitic scroll port. Removing it matches the native
implementation which already uses {}.
Made-with: Cursor
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
Contributor
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
Contributor
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
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.
Explanation of Change
On web,
MoneyRequestViewhad a web-onlyoverflowY: 'auto'style (viaoverflowMoneyRequestView) that created a CSS scroll container. SinceMoneyRequestViewhas no constrained height, this never provided actual scrolling — no scrollbar ever appeared. However, making it a scroll container could cause browsers to capture wheel events and prevent them from propagating to the parentInvertedFlatList, blocking the user from scrolling to see expense fields below the fold.This PR removes the web-only
overflowX: 'hidden'andoverflowY: 'auto'styles, making the web implementation match the native one (which already uses{}).MoneyRequestViewis always rendered inside a scrollable parent (InvertedFlatList,SelectionList, orScrollView), so it never needs its own overflow handling.Fixed Issues
$ #81195
Tests
Offline tests
N/A — this is a CSS-only change affecting scroll event propagation.
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Made with Cursor