[Due for payment 2026-05-26] iOS - Expense - Pay button splits in half in landscape mode

[mitarachim]

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.70-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: #87256
Email or phone of affected tester (no customers): sdsdjoijdoisnjodis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro Max / iOS 26.4.2
App Component: Money Requests

Action Performed:

1. Launch Expensify app.
2. Go to workspace chat.
3. Create an expense.
4. Open the report.
5. Click Submit, Approve and Mark as paid.
6. Click More > Cancel payment > Cancel payment.
7. Return to workspace chat.
8. Rotate device to landscape.

Expected Result:

Pay button will not split in half in landscape mode.

Actual Result:

Pay button splits in half 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

Bug7151369_1778544381488.ScreenRecording_05-12-2026_08-04-19_1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @truph01

[melvin-bot]

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

[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

Problem

The Pay button is clipped ("split in half") in landscape mode on iOS because PR #87256 moved the action buttons inside the HeaderWithBackButton row when isInLandscapeMode is true. That header row has a fixed height of 72px with overflow: 'hidden', which clips the button vertically.

Solution

The simplest fix is to stop treating mobile landscape as a "wide" layout for the MoneyReportHeader buttons. In src/components/MoneyReportHeader.tsx:81, the condition shouldShowHeaderButtonsInHeaderRow includes isInLandscapeMode, which forces the buttons into the 72px-tall header on small screens.

The fix: gate isInLandscapeMode so it only applies when the screen is actually wide enough to fit the buttons (i.e., not on narrow mobile layouts). Change:

const shouldShowHeaderButtonsInHeaderRow = isInLandscapeMode || !shouldDisplayNarrowVersion || isWideRHPDisplayedOnWideLayout || isSuperWideRHPDisplayedOnWideLayout;

to:

const shouldShowHeaderButtonsInHeaderRow = (isInLandscapeMode && !shouldDisplayNarrowVersion) || !shouldDisplayNarrowVersion || isWideRHPDisplayedOnWideLayout || isSuperWideRHPDisplayedOnWideLayout;

Since isInLandscapeMode && !shouldDisplayNarrowVersion is redundant with !shouldDisplayNarrowVersion, this simplifies to removing isInLandscapeMode from this line entirely — the other conditions already handle actual wide layouts correctly.

The same pattern should be reviewed in ButtonWithDropdownMenu/index.tsx:180 where isInLandscapeMode removes flex1 from the split button.

Root cause details

Data flow causing the bug:

1. User rotates iOS device to landscape → isInLandscapeMode = true, but shouldDisplayNarrowVersion remains true (small screen)
2. MoneyReportHeader.tsx:81: shouldShowHeaderButtonsInHeaderRow becomes true due to isInLandscapeMode
3. Buttons render inside HeaderWithBackButton (line 134) instead of below it (line 143)
4. headerBar style has height: 72px and overflow: 'hidden'
5. HeaderWithBackButton/index.tsx:243 inner container also has overflowHidden
6. The Pay button exceeds the 72px vertical space → clipped

---

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.