[$250] Unable to Scroll in Right-Hand Panel (RHP) for Certain Expenses

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction (Unable to reproduce)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @brianlee-expensify
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Navigate to Reports → Reports
2. Open any report that contains multiple expenses
3. Click to open any individual expense
4. Attempt to scroll down in the Right-Hand Panel (RHP)

Expected Result:

The RHP should be scrollable, allowing users to view all expense details.

Actual Result:

Scrolling does not work in the RHP for certain expenses.
Some expense details are inaccessible.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

The video for the issue is in Slack thread

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[Harmatta]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When opening certain expenses in the Right-Hand Panel (RHP) via Reports → Reports, the panel content is not scrollable. This makes some expense details inaccessible to the user.

What is the root cause of that problem?

The expense detail view rendered inside the RHP uses a ScrollView (or ScreenWrapper with scrolling enabled) whose height is constrained by a parent flex container. For most expenses the content fits or scrolls normally, but certain expense types — such as split expenses with multiple participants, distance requests with several waypoints, or expenses with large receipt images — render additional fields and components that push the content height beyond the visible area.

The scroll failure occurs because the inner content container (e.g. in src/pages/iou/request/step/IOURequestStepConfirmation.tsx or the equivalent detail page rendered in the RHP) either:

1. Uses a View with flex: 1 instead of a ScrollView for the section that overflows, or
2. Has a nested ScrollView / FlatList inside the outer ScrollView that captures the scroll gesture and prevents the parent from scrolling (nested virtualized list warning pattern).

Because this only affects "certain" expenses, the root cause is a conditional rendering branch: the extra fields rendered for those expense types sit outside the scrollable area or create a scroll-gesture conflict.

What changes do you think we should make in order to solve the problem?

1. Identify the specific expense detail page rendered in the RHP for the affected expense types (likely under src/pages/iou/ or src/expPages/).
2. Ensure the outermost content wrapper inside the RHP page is a ScrollView (not a plain View) so all conditionally-rendered sections are scrollable.
3. If nested scrollable lists exist (e.g. participant list, waypoint list), replace them with non-scrolling equivalents (plain mapped View items) to avoid the nested scroll conflict, or use nestedScrollEnabled on the inner list.
4. Verify that ScreenWrapper props like shouldEnableMaxHeight are set correctly so the scroll container respects the available RHP height.

How will you test this?

• Open Reports → Reports, select a report with multiple expenses.
• Open an expense that previously did not scroll (split expense with several participants, or distance expense with many waypoints).
• Confirm the RHP content is now fully scrollable.
• Regression: open a simple single-receipt expense and confirm scrolling still works (or is unnecessary if content fits).
• Test on both web (Chrome) and mobile (iOS/Android app).