[$250] iOS - Workspace - Circle icon is shown on top left of Members, Categories, Taxes, Distance rates

[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.70-3
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: Workspace Settings

Action Performed:

1. Launch Expensify app in landscape mode.
2. Go to workspace settings.
3. Go to Members, Categories, Taxes and Distance rates page.

Expected Result:

There will be no circle icon on the top left of the page.

Actual Result:

Circle icon is visible on the top left of Members, Categories, Taxes and Distance rates page.

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: @truph01

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022059673471480753576
• Upwork Job ID: 2059673471480753576
• Last Price Increase: 2026-06-10

[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 the regression. In landscape mode on iOS, the PR changed workspace settings pages (Members, Categories, Taxes, Distance Rates) to place header buttons in the header row instead of a separate line, but the illustration icon (e.g. ReceiptWrangler) passed via the icon prop to HeaderWithBackButton is still rendered unconditionally. This causes the circle icon to appear on the top-left of those pages in landscape mode — a layout path that was not exercised before this PR.

Assigned: @GCyganek (PR author), @truph01 @mountiny (approving reviewers)
Labels: DeployBlockerCash kept (Frontend bug in App). No label changes needed.

Detailed Analysis

Evidence

• The issue is staging-only (Reproducible in production?: No), version 9.3.70-3, which matches the current StagingDeployCash.
• melvin-bot already flagged PR Use dekstop layout for header buttons in landscape mode #87256 as the likely cause.
• PR Use dekstop layout for header buttons in landscape mode #87256 is the first chronological PR in the StagingDeployCash deploy checklist.
• The bug affects workspace settings pages that are explicitly modified in the PR: WorkspaceMembersPage.tsx, WorkspaceCategoriesPage.tsx, WorkspaceTaxesPage.tsx, and PolicyDistanceRatesPage.tsx.
• The PR was merged 2026-05-08, and the bug is in the staging version deployed after that merge.

Verification

• PR Use dekstop layout for header buttons in landscape mode #87256 directly modifies all four files named in the bug report: WorkspaceMembersPage.tsx, WorkspaceCategoriesPage.tsx, WorkspaceTaxesPage.tsx (via WorkspaceTaxesPage.tsx), and PolicyDistanceRatesPage.tsx.
• The new useShouldDisplayButtonsInSeparateLine hook (src/hooks/useShouldDisplayButtonsInSeparateLine.ts) returns shouldUseNarrowLayout && !isInLandscapeMode. On iOS in landscape mode this returns false.
• Each affected page passes headerContent={!shouldDisplayButtonsInSeparateLine && getHeaderButtons()} to WorkspacePageWithSections, which in turn passes it to HeaderWithBackButton. In landscape mode, !false = true so buttons are rendered in the header row. However, the icon prop (e.g. illustrations.ReceiptWrangler) is still also passed and renders unconditionally in HeaderWithBackButton at line 271–278, creating the visible circle icon on the top-left.

Root Cause

Before PR #87256, headerContent was only populated when !shouldUseNarrowLayout (i.e. wide/desktop layout). On iOS in landscape mode, shouldUseNarrowLayout was true, so headerContent was false and buttons appeared below the header. After the PR, landscape mode is treated like desktop, so buttons move into the header row. The problem is that the icon illustration (used for the headline header style on narrow portrait layouts) is now also shown in the same header row in landscape mode, appearing as an unexpected circle icon on the top-left. The fix should either conditionally suppress the icon prop in landscape mode, or the PR should be reverted.