[Due for payment 2026-05-20] [Due for payment 2026-05-20] iOS - Chat - Claim offer banner is cut off after rotating device to portrait

[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: Chat Report View

Action Performed:

1. Launch Expensify app.
2. Create a workspace and upgrade it to Control plan.
3. Go to Concierge chat.
4. Turn the device to landscape.
5. Tap on the composer.
6. Turn the device to portrait.

Expected Result:

Claim offer banner will not be cut off after rotating device to portrait.

Actual Result:

Claim offer banner is cut off after rotating device to portrait.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7151378_1778545222604.ScreenRecording_05-12-2026_08-18-25_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.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #87256 - "Use desktop layout for header buttons in landscape mode" by @GCyganek (High confidence)
Related Issues: N/A

Recommendation: REVERT

PR #87256 introduced a new layout hook useShouldDisplayButtonsInSeparateLine and applied it to EarlyDiscountBanner.tsx, changing the layout condition from shouldUseNarrowLayout to shouldUseNarrowLayout && !isInLandscapeMode. This change causes the banner to be cut off when the device rotates back to portrait after being in landscape, because the hook's value and BillingBanner's own internal layout condition can fall out of sync during the rotation event.

Assigned: @GCyganek (PR author), @truph01, @mountiny (approving reviewers)
Labels: DeployBlockerCash is kept (frontend App PR is the cause). No label changes needed — DeployBlocker is not present on this issue.

Detailed Analysis

Evidence

• The issue is reproducible on staging (version 9.3.70-0) but not production, meaning the cause is a PR in the current staging deploy.
• The melvin-bot already flagged PR Use dekstop layout for header buttons in landscape mode #87256 as the likely cause based on automated heuristics.
• PR Use dekstop layout for header buttons in landscape mode #87256 is listed in the StagingDeployCash checklist and was merged on 2026-05-08, well within the current staging window.
• The bug affects the "Claim offer banner" (the EarlyDiscountBanner component) specifically when rotating from landscape to portrait on iOS.
• PR Use dekstop layout for header buttons in landscape mode #87256 explicitly modifies src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx.

Verification

• Affected file: src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx
• PR Use dekstop layout for header buttons in landscape mode #87256 modifies this exact file (8 additions, 7 deletions confirmed via PR file list).
• The PR also introduced a new hook src/hooks/useShouldDisplayButtonsInSeparateLine.ts which returns shouldUseNarrowLayout && !isInLandscapeMode.

Root Cause

Before PR #87256, EarlyDiscountBanner used shouldUseNarrowLayout (from useResponsiveLayout) to decide:

1. The style for the right-side button container (small screen vs wide screen styling)
2. Whether to show the dismiss button inline or separately

After PR #87256, EarlyDiscountBanner uses useShouldDisplayButtonsInSeparateLine (which is shouldUseNarrowLayout && !isInLandscapeMode) for these same decisions.

Meanwhile, BillingBanner.tsx (the parent container) independently uses its own shouldUseNarrowLayout && !isInLandscapeMode check to decide where to place the rightComponent in the layout tree. When the device rotates from landscape back to portrait — especially after the keyboard was involved (which can delay rotation events on iOS) — there is a timing window where EarlyDiscountBanner's hook value and BillingBanner's internal state may not agree. Additionally, in the landscape-to-portrait rotation path, shouldDisplayButtonsInSeparateLine transitions from false to true, triggering a style change that applies styles.flexBasis100 to the right component View. If the transition is not fully processed (e.g., isInLandscapeMode lags behind the actual device orientation), the button container gets incorrect flex sizing — causing the banner to visually clip or cut off.

The original shouldUseNarrowLayout-only approach did not have this issue because it only changed on narrow/wide layout transitions (screen width breakpoints), not on rotation angle changes which can be more volatile on iOS when the keyboard is involved.