Skip to content

Fix RHP scroll for expenses with many fields on web#83773

Draft
mountiny wants to merge 1 commit intomainfrom
vit-fix-rhp-scroll-overflow
Draft

Fix RHP scroll for expenses with many fields on web#83773
mountiny wants to merge 1 commit intomainfrom
vit-fix-rhp-scroll-overflow

Conversation

@mountiny
Copy link
Contributor

Explanation of Change

On web, MoneyRequestView had a web-only overflowY: 'auto' style (via overflowMoneyRequestView) that created a CSS scroll container. Since MoneyRequestView has 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 parent InvertedFlatList, blocking the user from scrolling to see expense fields below the fold.

This PR removes the web-only overflowX: 'hidden' and overflowY: 'auto' styles, making the web implementation match the native one (which already uses {}).

MoneyRequestView is always rendered inside a scrollable parent (InvertedFlatList, SelectionList, or ScrollView), so it never needs its own overflow handling.

Fixed Issues

$ #81195

Tests

  1. Open a report that contains multiple expenses
  2. Click on an individual expense to open it in the RHP
  3. Use an expense that has many fields enabled (Locations, Categories, Tags, Tax, Classes)
  4. Verify you can scroll down to see all expense fields in the RHP
  5. Verify chat messages in the transaction thread still scroll normally
  6. Verify the multi-expense report table view still scrolls
  7. Open a duplicate review or merge transaction page — verify MoneyRequestView content is fully visible
  • Verify that no errors appear in the JS console

Offline tests

N/A — this is a CSS-only change affecting scroll event propagation.

QA Steps

  1. Open a report with multiple expenses (ensure the workspace has Locations, Categories, Tags, Tax, Classes enabled)
  2. Click on an individual expense to view it in the RHP
  3. On a viewport that isn't very tall, verify you can scroll to see all expense detail fields
  4. Verify chat messages in a transaction thread still scroll normally
  5. Verify the multi-expense report table view still scrolls
  • Verify that no errors appear in the JS console

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari

Made with Cursor

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
Copy link

codecov bot commented Feb 27, 2026

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines Coverage Δ
src/styles/utils/overflowMoneyRequestView/index.ts 0.00% <0.00%> (ø)
... and 8 files with indirect coverage changes

@github-actions
Copy link
Contributor

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant