Home - Receipt preview blocks the expense view in Recently added section

[applause-bot]

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.4.17-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #93451
Email or phone of affected tester (no customers): sdjnoisdjdosijsonssjo@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Create a map distance expense.

1. Go to staging.new.expensify.com
2. Go to Home.
3. Hover over the receipt in Recently added section.

Expected Result:

Receipt preview should not block the expense view in Recently added section.

Actual Result:

Receipt preview blocks the expense view in Recently added section.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7188075_1782170776166.7.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7188075

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/0308fcaf5ee5f6049aeed0525365635341ac39b2fb310694deaed5e63976be0e

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #93451

[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

What is the root cause of that problem?

The new "Recently added" rows reuse the ReceiptCell component from the transaction table, and that component carries its hover receipt preview with it. When you hover a thumbnail, the preview is rendered into document.body via a portal and positioned with a fixed viewport offset (position: absolute; left: 60; top: 60; width: 380). On Home that puts a 380px-wide preview panel in the top-left corner of the screen, overlapping the Recently added list — so it "blocks the expense view".

This worked fine where ReceiptCell was originally used (the Search / MoneyRequestReport table fills the pane, so the top-left preview doesn't cover anything important), but it's wrong in the Home grid layout that PR #93451 introduced. A distance/map expense just makes it easy to reproduce because such expenses always have an e-receipt to preview.

Evidence

• Preview is mounted on hover inside the shared cell: ReceiptCell.tsx:100-106
• The cell is reused by the new Home row: RecentlyAddedRow.tsx:48-54, enabled whenever Home is focused via shouldShowReceiptPreview={isFocused} (index.tsx:177)
• The preview is portaled to document.body: ReceiptPreview/index.tsx with the fixed-position style styles/index.ts:5934-5946
• Before PR [Home Page] Add Recently added slot to Home #93451 ReceiptCell was only used in TransactionItemRowWide.tsx / TransactionItemRowNarrow.tsx, where the full-width table makes the top-left preview unobtrusive.

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

Disable the hover preview in the Recently added section — it isn't needed there (rows already open the expense on click), and it's the minimal, low-risk fix for a deploy blocker:

• In RecentlyAddedRow.tsx, pass shouldShowPreview={false} to ReceiptCell, and remove the now-unused shouldShowReceiptPreview prop threading (down from index.tsx shouldShowReceiptPreview={isFocused} and the useIsFocused wiring).

This leaves the Search/Report table preview untouched.

What alternative solutions did you explore? (Optional)

If product wants to keep a preview on Home, the alternative is to position it contextually (anchored near the hovered cell) instead of the fixed left: 60; top: 60 offset. That's a larger change to a component shared with Search, so it's better as a follow-up than a deploy-blocker fix.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/94247) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[ZhenjaHorbach]

We already have an issue for that
Let's close this
CC: @grgia