Expense - Receipt modal is long in landscape mode

[jponikarchuk]

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.54-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: #85229
Email or phone of affected tester (no customers): jsdjosidjiojisojio3@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Money Requests

Action Performed:

1. Launch Expensify app in landscape mode.
2. Go to workspace chat.
3. Create an expense without receipt.
4. Open the report.

Expected Result:

Receipt thumbnail should have the same dimension in landscape and portrait mode.

Actual Result:

Receipt thumbnail on review duplicates confirm page is long in landscape mode.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @jakubstec

[melvin-bot]

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

[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.

[OSBotify]

Investigation Summary: Frontend bug. Causing PR: 85229 (Unlock landscape mode) by @GCyganek - High confidence. Recommendation: REVERT. PR 85229 unlocked landscape mode on iOS/Android phones. The receipt thumbnail computes its height based on windowWidth via getCompactReceiptDimensions in src/components/MoneyRequestConfirmationListFooter.tsx. In landscape mode windowWidth is the long dimension causing the thumbnail height to grow disproportionately. Before 85229 phones were portrait-locked. Reverting 85229 is recommended as it is a new feature not yet in production and caused multiple regressions. Labels: DeployBlockerCash kept. Assigned: @GCyganek @rushatgabhane @truph01 @mjasikowski

[MelvinBot]

Proposal

What is the root cause of that problem?

The receipt thumbnail in MoneyRequestReceiptView uses the expenseViewImageSmall style (src/styles/index.ts:4616-4620) which sets maxWidth: 440 and aspectRatio: 16/9. In portrait mode on a phone (~395dp width), the container is constrained by available space to ~355dp wide. But in landscape (~930dp width), the container expands to its full 440dp maxWidth, making the image taller due to the fixed aspect ratio. Since the screen height is much shorter in landscape, the receipt dominates the view and appears "long/stretched."

The style selection at MoneyRequestReceiptView.tsx:400-408 has no landscape-specific handling — on native, shouldUseNarrowLayout is always true (since isSmallScreenWidth is hardcoded true), so expenseViewImageSmall is always used regardless of orientation.

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

In MoneyRequestReceiptView.tsx, when selecting the receipt style for narrow layout, constrain maxWidth to the screen's shorter dimension (minus margins) so the receipt never grows wider in landscape than it would be in portrait. Use Math.min(windowWidth, windowHeight) from the existing window dimensions to compute this constraint, and merge it with the existing expenseViewImageSmall style.

What alternative solutions did you explore? (Optional)

1. Modifying expenseViewImageSmall globally — rejected because the style is shared and a static style can't access window dimensions.
2. Adding a fixed maxHeight — this would work but breaks the clean aspect-ratio-driven sizing and could cause issues on smaller devices.
3. Using isInLandscapeMode to pick a different style — possible but less robust than simply constraining to the shorter dimension, which works regardless of orientation.

---

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.