[Due for payment 2026-08-05] Android & iOS - Search - Spend icon does not scale up in size, "p" in "Spend" is cut off

[applause-bot]

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.45-4
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #96443
Email or phone of affected tester (no customers): sdsjodijnsdojsosjio@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Search

Action Performed:

Precondition:

• Set device font size to maximum.
• Account has at least one workspace.

1. Launch Expensify app.
2. Open search.
3. Type Go to.

Expected Result:

Spend icon will scale up in size.
"Spend" will not be cut off.

Actual Result:

Spend icon does not scale up in size.
"p" in "Spend" is cut off.

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

Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7219909

Issue Owner

Current Issue Owner: @marufsharifi

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/d5e2ae75defebc5f1d4826aeeb78d9734036a971ed4df16f2d1b65858ecb7343

[melvin-bot]

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

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

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #96443 - "Add Spend navigation suggestions to Search Router" by @nabi-ebrahimi (High confidence)
Related Issues: #92752 (the feature request this PR implemented)

Recommendation: ROLL FORWARD (targeted fix)

This is a brand-new, staging-only feature and the defect is an isolated font-scaling/line-height issue in the row rendering — a small, self-contained CSS fix is safer and simpler than reverting the whole feature. If a quick fix isn't produced within the deploy window, fall back to reverting #96443.

Assigned: @nabi-ebrahimi (PR author), @marufsharifi (approving reviewer), @carlosmiceli (approving reviewer) from the highest-confidence causing PR.
Labels: No label changes. DeployBlockerCash is correctly present (App deploy blocker) and is kept because an App PR caused the issue. No DeployBlocker (Web) label is present.

📋 Detailed Analysis

Evidence

• The bug is in the "Go to" / Spend navigation suggestions in the Search Router. This feature is brand new and was added entirely by PR Add Spend navigation suggestions to Search Router #96443 ("Add Spend navigation suggestions to Search Router"), which is confirmed to be in the current StagingDeployCash #97134 (line 94).
• The issue is reproducible on staging only ("N/A - new feature, doesn't exist in prod"), consistent with a defect introduced by a PR on the current staging deploy.
• The "caught during regression testing" field and the melvin-bot assignment both point at Add Spend navigation suggestions to Search Router #96443. Verified: the PR adds useNavigationSuggestions.tsx, which renders each Spend suggestion row's right-hand "Spend" context tag via TextWithIconCell.

Verification

Affected files (all confirmed in the #96443 file list):

• src/components/Search/SearchRouter/useNavigationSuggestions.tsx (new in PR) — builds the Spend rows and passes the rightElement "Spend" tag.
• src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx (modified in PR) — renders each row: leading icon at fixed size={CONST.ICON_SIZE.MEDIUM} plus the rightElement.
• src/components/Search/SearchList/ListItem/TextWithIconCell.tsx — the component used for the "Spend" tag (pre-existing, originally for transaction table Tag/Category cells; reused here by Add Spend navigation suggestions to Search Router #96443 in a new max-font-scale context it was not designed for).

The "Spend" context tag is wired up here (the rightElement passed into every Spend suggestion row):

App/src/components/Search/SearchRouter/useNavigationSuggestions.tsx

Lines 148 to 155 in 697e25d

	rightElement: (
	<TextWithIconCell
	text={translate('common.spend')}
	icon={icons.ReceiptMultiple}
	showTooltip={false}
	textStyle={styles.textLabelSupporting}
	/>
	),

Root Cause

Two distinct symptoms, both originating in TextWithIconCell as used for the new Spend tag:

1. "p" in "Spend" is cut off (the real blocker).
The tag text is rendered with a fixed line-height and single line:

App/src/components/Search/SearchList/ListItem/TextWithIconCell.tsx

Lines 38 to 43 in 697e25d

	<TextWithTooltip
	text={text}
	shouldShowTooltip={showTooltip}
	numberOfLines={numberOfLines}
	style={[styles.label, numberOfLines > 1 ? styles.preWrap : styles.pre, styles.justifyContentCenter, styles.textMicro, styles.textSupporting, styles.flexShrink1, textStyle]}
	/>

The style array includes styles.textMicro, which hard-codes a fixed pixel lineHeight:

App/src/styles/index.ts

Lines 516 to 520 in 697e25d

	textMicro: {
	...FontUtils.fontFamily.platform.EXP_NEUE,
	fontSize: variables.fontSizeSmall,
	lineHeight: variables.lineHeightSmall,
	},

textMicro.lineHeight = variables.lineHeightSmall resolves to a fixed ~14px on native:

App/src/styles/variables.ts

Line 157 in 697e25d

lineHeightSmall: getValueUsingPixelRatio(14, 16),

When the OS font size is set to maximum, fontSize scales the glyphs up, but the fixed lineHeight line-box does not grow. With numberOfLines={1} (the component default) the text can't reflow, so the descender of the "p" gets clipped inside the too-short line box. Note that on native, styles.pre from whiteSpace/index.native.ts is an empty object, so wrapping is governed solely by numberOfLines={1} — the clip cannot be avoided by wrapping.

2. "Spend" icon does not scale up.
The tag icon is hard-coded to 12×12 and does not respond to font scaling:

App/src/components/Search/SearchList/ListItem/TextWithIconCell.tsx

Lines 32 to 37 in 697e25d

	<Icon
	src={icon}
	fill={theme.icon}
	height={12}
	width={12}
	/>

(Likewise the leading row icon is a fixed CONST.ICON_SIZE.MEDIUM in SearchQueryListItem:

App/src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx

Lines 71 to 78 in 697e25d

	{!!item.singleIcon && (
	<Icon
	src={item.singleIcon}
	fill={item.shouldIconApplyFill !== false ? theme.icon : undefined}
	additionalStyles={styles.mr3}
	size={CONST.ICON_SIZE.MEDIUM}
	/>
	)}

). Icons in the app generally don't scale with fontScale; the icon "not scaling" is cosmetic — the clipped text is the substantive defect.)

Suggested targeted fix

Make the Spend tag tolerate large font scales in TextWithIconCell (as used for the Spend row), e.g.:

• Allow the tag text to wrap / not clip descenders under large font scale — e.g. pass numberOfLines={2} (or 0 for unbounded) for this usage, and/or remove the fixed lineHeight from the tag text so the line box grows with the glyphs, and add a small paddingBottom so descenders aren't clipped.
• Optionally scale the 12×12 tag icon with fontScale (via PixelRatio.getFontScale()) so it visually matches the enlarged text.

Because TextWithIconCell is shared with the transaction table (TagCell/CategoryCell), scope the change to the Search Router usage (e.g. via props from useNavigationSuggestions) rather than changing the shared defaults, to avoid regressing the transaction table layout.