Expense - Expense report RHP shows empty space above expense details

[nlemma]

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: 9.3.38-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-9540/folder/13176730/41237111/1253292678
Email or phone of affected tester (no customers): sdijnsoijsodosj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense.
4. Open the expense.

Expected Result:

Expense report RHP will not show empty space above expense details.

Actual Result:

Expense report RHP shows empty space above expense details.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7104072_1773656726567.2.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @cristipaval (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

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

When opening a single-transaction expense from a workspace chat, the expense report RHP shows empty space above the expense details on web (Chrome/Safari). This is a staging-only regression in version 9.3.38-0.

What is the root cause of that problem?

PR #82507 introduced a change to ActionSheetAwareScrollView (the web-only variant at src/components/ActionSheetAwareScrollView/index.tsx) that adds flexColumnReverse and justifyContentEnd to the contentContainerStyle of every ScrollView it wraps:

contentContainerStyle={[restProps.contentContainerStyle, restProps.horizontal ? styles.flexRowReverse : styles.flexColumnReverse, styles.justifyContentEnd]}

This was part of the inverted FlatList rework for fixing text selection on web. The change is correct for the main chat ReportActionsList (which is an inverted list), but it has a side effect on the expense report RHP.

Here's the chain:

1. When a single-transaction expense report is opened in the RHP, shouldDisplayReportTableView returns false (because isSingleTransactionReport is true — see src/libs/MoneyRequestReportUtils.ts:127-129), so MoneyRequestReportView renders ReportActionsView instead of MoneyRequestReportActionsList (src/components/MoneyRequestReportView/MoneyRequestReportView.tsx:298-299).
2. ReportActionsView renders ReportActionsList, which uses ActionSheetAwareScrollView as its renderScrollComponent (src/pages/inbox/report/ReportActionsList.tsx:920).
3. The ActionSheetAwareScrollView now forces justifyContentEnd on the content container, overriding chatContentScrollView's justifyContent: 'flex-start' (src/styles/index.ts:1982).
4. The parent wrapper in MoneyRequestReportView already has justifyContentEnd (src/components/MoneyRequestReportView/MoneyRequestReportView.tsx:298), which pushes the content area to the bottom.
5. When the report action content is sparse (single transaction, few or no comments), the combination of the wrapper's justifyContentEnd and the content container's overridden justifyContent: 'flex-end' creates a visible gap between the header and the expense details.

In production, ActionSheetAwareScrollView did not add these styles, so chatContentScrollView's justifyContent: 'flex-start' was preserved, and the content started at the top of the container.

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

The ActionSheetAwareScrollView should only apply flexColumnReverse and justifyContentEnd when it is wrapping an inverted list. It should not unconditionally force these styles on every scroll view that uses it.

One approach: pass the inverted prop through to ActionSheetAwareScrollView and only apply the inversion styles when inverted is true:

In src/components/ActionSheetAwareScrollView/index.tsx, conditionally apply the inversion styles based on a new inverted prop (or by checking restProps.inverted), rather than applying them unconditionally. When inverted is falsy, the ScrollView should render without flexColumnReverse/justifyContentEnd modifications.

What alternative solutions did you explore? (Optional)

An alternative would be to remove justifyContentEnd from the wrapper View in MoneyRequestReportView.tsx:298 when rendering ReportActionsView for single-transaction reports. However, this would be addressing the symptom rather than the root cause — the core issue is that ActionSheetAwareScrollView unconditionally applies inverted-list styles to all scroll views on web.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.