[Due for payment 2026-10-02] Mobile Spend Page Header Changes When Switching Tabs

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.81-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dannymcclain
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to the Spend page on mobile.
2. Observe the page title in the top header.
3. Select a different Spend tab.
4. Observe the top header again.

Expected Result:

The top-level page header should always display Spend, regardless of which Spend tab is selected.
The selected tab should act as the title/header for the current view.

Actual Result:

The top-level page title changes to match the selected tab when switching between Spend tabs.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

CleanShot.2026-09-16.at.12.26.34.mp4

ScreenRecording_09-16-2026.19-48-37_1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[MelvinBot]

Proposal

What is the root cause of that problem?

On narrow layouts the top header and the tab selector both render the selected tab's label, so the page loses its static "Spend" title.

SearchPageHeaderNarrow.tsx:20-25 renders SearchPageHeaderCommon.tsx:23-30, which sets breadcrumbLabel from getSearchPageHeaderTitle.ts:37-39 — which returns the matched tab's label ("Reports" / "Expenses" / "Drafts") and only falls through to common.spend when nothing matches. Since a tab always matches on the Spend page, the "Spend" fallback is effectively unreachable there.

Wide looks correct only because it has a second header: the left sidebar hard-codes breadcrumbLabel={translate('common.spend')} at SearchSidebar.tsx:113-121, and that sidebar returns null on narrow (SearchSidebar.tsx:83-85). So wide = static "Spend" + tab name; narrow = tab name twice.

Introduced by Show selected saved view name in Search page header, which replaced narrow's hard-coded breadcrumbLabel={translate('common.spend')} with the dynamic title. Surfacing saved-search names was the goal; changing narrow was collateral.

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

Make SearchPageHeaderNarrow render TopBar directly with breadcrumbLabel={translate('common.spend')} again, instead of delegating to SearchPageHeaderCommon. Leave the wide path untouched.

The active tab keeps its own label from the tab selector (StaticSearchTypeMenu.tsx:50-55 and SearchTypeMenuNarrow.tsx:186), which is exactly the hierarchy the issue asks for. PR #97663's saved-search goal isn't regressed on mobile either — an active saved search already renders as its own narrow tab (StaticSearchTypeMenu.tsx:59).

The doc comment at getSearchPageHeaderTitle.ts:22-28 says the helper is shared "so the two can't diverge" — that needs rewording, since divergence becomes intentional.

Supporting evidence and notes

Verified on 6724ab51d28ac348d742a9ecedf25f2b5c06531e (App 9.4.81-0, the reported version).

Title chain on narrow:

1. SearchPageNarrow/index.tsx:256-260 renders SearchPageHeaderNarrow, then the tab selector right below it.
2. SearchPageHeaderNarrow → SearchPageHeaderCommon → getSearchPageHeaderTitle.
3. Tab labels come from translationPath values in SearchSuggestionUtils.ts:155 / :174 / :193, resolving to "Reports" / "Expenses" / "Drafts" in en.ts:9601-9603. The header and the tab use the same currentSearchKey and the same translationPath, which is why the label is duplicated verbatim.

The \#97663 diff confirms the regression line:

-            breadcrumbLabel={translate('common.spend')}
+            breadcrumbLabel={title}

Alternatives considered:

• Make the wide content header static too. Rejected — the issue is scoped to mobile, and wide already reads correctly with the sidebar providing "Spend".
• Show a breadcrumb prefix like "Spend › Reports". Rejected — the issue asks for the top-level header to "always display Spend", and the tab immediately below already names the view.

Notes:

• Mobile selection mode is unaffected; it returns early at SearchPageHeaderNarrow.tsx:16-18.
• The browser document title is already always "Spend" (SearchPage.tsx:41).
• No test coverage to update — nothing under tests/ references SearchPageHeaderNarrow, SearchPageHeaderCommon, or getSearchPageHeaderTitle.
• Bonus: this drops two Onyx-backed hooks (useSearchTypeMenuSections, useActiveSavedSearch) from the narrow header render path.
• Conflict risk: [No QA][Insights][R1][App] Remove Spend suggested searches from the Spend page’s UI is open and also touches getSearchPageHeaderTitle.

No likely duplicate issues found in a scan of open Expensify/App issues.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/101390) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

---

view run

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[sobitneupane]

Proposal from Melvin looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @mjasikowski, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mjasikowski]

@MelvinBot implement your proposal

[MelvinBot]

🤖 Draft PR created: Keep the narrow Spend page header static instead of echoing the selected tab

Please mark it as "Ready for review" when it is ready for review.

What changed: SearchPageHeaderNarrow now renders TopBar directly with breadcrumbLabel={translate('common.spend')} instead of delegating to SearchPageHeaderCommon, so the narrow top-level header stays "Spend" and the tab selector below it names the current view. The wide path is behaviourally unchanged.

Two small follow-ons: shouldShowLoadingBar is dropped from SearchPageHeaderCommon (narrow was its only caller and now passes it straight to TopBar), and the doc comment on getSearchPageHeaderTitle is reworded since the two headers now diverge on purpose.

Checks run

Check	Result
npx eslint <changed files>	✅ pass
npm run typecheck	✅ pass
npm run spell-changed	✅ pass
npm run fmt (oxfmt, the CI gate) — no diff	✅ pass
npm run react-compiler-compliance-check check <changed components>	✅ pass (babel + oxc both compiled)
npm test -- --silent --testPathPattern "Search"	✅ pass — 102 suites, 2191 tests

Not run: the full Jest suite (only the Search-scoped subset) and the Storybook smoke test.

⚠️ Automated UI verification was not possible in this run. The browser session handed to the run failed onboarding and rendered a blank page, so the Spend page was never reachable and none of the narrow/wide header assertions could be checked live. The change needs a human pass on a narrow viewport before the PR goes ready for review.