Accounting - "Offer available!" tag is misaligned at "Xero" on "Accounting" page

[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.0-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: #78586
Email or phone of affected tester (no customers): forexmater+154@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Android 11/App
App Component: Other

Action Performed:

Preconditions: User is logged in; Workspace created with "Accounting";

1. Go to https://staging.new.expensify.com/
2. Tap "Workspaces" tab
3. Open the created workspace
4. Tap "Accounting"

Expected Result:

"Offer available!" tag should be on same row of "Xero", as is on Web.

Actual Result:

"Offer available!" tag is moved bellow "Xero" on "Accounting" page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

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

[nkdengineer]

It's expected, not a bug.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #78586 - "feat: Add promo offer to Xero on Accounting page" by @nkdengineer (High confidence)
Related Issues: None

Recommendation: REVERT

PR #78586 introduced a new "Offer available!" badge for Xero on the Accounting page with responsive behavior. On narrow layouts (mobile), the badge is positioned below the title using shouldShowBadgeBelow. However, the badge placement logic appears to be causing the misalignment issue on Android where the badge moves to a separate line below "Xero" instead of staying on the same row.

📋 Detailed Analysis

Evidence

• The issue is staging-only and not reproducible on production, which confirms it's caused by a PR in the current deploy checklist
• The issue report specifically references PR feat: Add promo offer to Xero on Accounting page #78586 as the source
• PR feat: Add promo offer to Xero on Accounting page #78586 added the "Offer available!" badge with shouldShowBadgeBelow: shouldUseNarrowLayout logic
• The bug only occurs on Android App (narrow layout), not on Web - consistent with the responsive badge positioning

Root Cause

The PR introduced a new prop shouldShowBadgeBelow to the MenuItem component that, when true, renders the badge below the title instead of inline with it. On Android in narrow layout mode, this causes the badge to appear on its own line below "Xero" rather than on the same row as shown on Web.

The code in PolicyAccountingPage.tsx line 313 sets:

shouldShowBadgeBelow: shouldUseNarrowLayout

This moves the badge rendering to a different position in the component tree (line 929-938 in MenuItem.tsx) with styles.ml3, styles.mt2 which places it on a new line, causing the reported misalignment.