Android - Expense - "Add" is shown instead of "Add receipt" on confirm page

[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-0
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: #96203
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: Money Requests

Action Performed:

Precondition:

• Device is Android 16.
• Set font size to minimum.

1. Launch Expensify app.
2. Go to workspace chat.
3. Tap + > Create expense > Manual.
4. Enter amount > Next.

Expected Result:

"Add receipt" will be shown on confirm page.

Actual Result:

"Add" is shown instead of "Add receipt" on confirm page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7219100_1785179408373.Screen_Recording_20260728_030754_Expensify.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Julia Ponikarchuk
Bug ID: 7219100

Issue Owner

Current Issue Owner: @emkhalid

[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/0a4f7d6ee9a6b4abb7e51b27f86b1a30902419e6a05b2060a68657d48e914529

[melvin-bot]

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

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

Proposal

Root Cause: The compact "Add receipt" banner added by #96203 renders the label in a fixed-height (52dp), overflow: 'hidden' container with no single-line guard on the Text. At minimum system font size the label wraps to two lines (Add / receipt) and the second line is clipped by the fixed height, leaving only "Add".

Recommended Fix: Add numberOfLines={1} to the compact label Text at ReceiptEmptyState.tsx:149 (and styles.flexShrink1 as a belt‑and‑suspenders, matching how Button handles icon+label rows). Do not just drop the fixed height/overflow — those keep the intended banner size; the defect is the missing single‑line guard.

What is the root cause of that problem?

#96203 added a new compact branch to ReceiptEmptyState. On a manual expense (non‑scan) on Android it is the branch that renders, and its label has no wrap protection.

Mechanism & evidence

• The compact branch renders a bare <Text style={styles.textStrong}>{translate('dropzone.addReceipt')}</Text> (= "Add receipt") in a flexRow with no numberOfLines, no flexShrink, no width/ellipsize — ReceiptEmptyState.tsx:141-150.
• Its container receiptEmptyStateCompact has a hard‑coded height: 52 + overflow: 'hidden' — styles/index.ts:4971-4978. Anything past 52dp is clipped.
• This branch is reached on a manual Android expense: ReceiptSection.tsx:134 passes isCompact={!compact.isCompactMode}, and isCompactMode = !showMoreFields && isScan && !isInLandscapeMode is false for a non‑scan expense — useCompactReceiptDimensions.ts:31. So isCompact becomes true.
• Why minimum font size triggers it: Text sets allowFontScaling={false} and re‑derives font/line metrics from PixelRatio.getFontScale() via getValueUsingPixelRatio() (variables.ts). At min font getFontScale() < 1, so the label's metrics shrink while the container stays a fixed 52dp — the shifted text measurement flips Android's row layout into a word‑wrap, and overflow: 'hidden' clips the second word. "Add" being exactly the first word is the signature of word‑wrapping.

Confidence: Medium — root cause and location are clear from code, but I couldn't get an on‑device Android repro (no emulator available). A default‑vs‑minimum font screenshot on device would confirm the wrap‑then‑clip visually.

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

Give the compact label a single-line guard so it can never wrap out of the fixed-height banner: set numberOfLines={1} on the compact Text, and add styles.flexShrink1 so it truncates gracefully instead of overflowing if space is ever tight.

What alternative solutions did you explore? (Optional)

Removing the fixed height: 52 / overflow: 'hidden' would also stop the clip, but it changes the intended compact banner sizing and doesn't address the underlying missing wrap guard, so it's not preferred.

---

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

[MelvinBot]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #96203 - "Expense - Reduce confirmation form scrolling" by @emkhalid (High confidence)
Related Issues: None

Recommendation: ROLL FORWARD

This is a cosmetic label-truncation defect that reproduces only at minimum system font size, and #96203 shipped a broad, wanted UX improvement (reduced confirmation-form scrolling). A one-line single-line guard on the compact label is far safer and smaller than reverting the entire feature.

Assigned: @emkhalid (PR author), @sobitneupane and @inimaga (approving reviewers) from the highest-confidence causing PR
Labels: No changes. Kept DeployBlockerCash (App PR caused it → App deploy is blocked). There is no DeployBlocker label on this issue, and both blocker labels must never be removed together.

📋 Detailed Analysis

Evidence

• PR Expense - Reduce confirmation form scrolling #96203 is item Remove unread indicator and just use bold weight for report name #68 in the current StagingDeployCash checklist #97134 for release 9.4.45-0 — the exact version in the report.
• Bug is staging-only / N/A in prod because the compact receipt banner is a new feature that does not exist in production. The regression window matches: Expense - Reduce confirmation form scrolling #96203 merged 2026-07-26, the blocker was filed 2026-07-27.
• The compact branch renders a bare label with no single-line guard inside a fixed-height, overflow: 'hidden' container. At minimum font size the row layout flips to word-wrap and the second word ("receipt") is clipped by the 52dp height, leaving only "Add" — the fact that exactly the first word survives is the signature of word-wrap + clip.
• The whole banner (Wrapper with onPress) remains tappable regardless of the clipped label, so the "Add receipt" action still works — the defect is visual only.

Verification

• Affected files (all owned by Expense - Reduce confirmation form scrolling #96203):
  • Compact branch + unguarded label: src/components/ReceiptEmptyState.tsx#L141-L150, offending line #L149.
  • Fixed-height clip container: src/styles/index.ts#L4971-L4977 (height: 52, overflow: 'hidden').
  • Compact routing for manual expenses: ReceiptSection.tsx#L134 (isCompact={!compact.isCompactMode}) and useCompactReceiptDimensions.ts#L31 (isCompactMode = !showMoreFields && isScan && !isInLandscapeMode). For a manual/non-scan expense isScan is false → isCompactMode is false → isCompact is true, so the compact branch renders. Matches the repro (Manual expense).
• PR ownership confirmed via file history + PR diff (local checkout is a shallow merge, so I traced through the GitHub API):
  • Every commit that created/shaped the compact ReceiptEmptyState (fb18fac8e "Reduce expense confirmation form scrolling", fd2b5c59d, bfc83a8ff, 5b128891f) maps to PR Expense - Reduce confirmation form scrolling #96203 — no earlier PR owns these lines.
  • The Expense - Reduce confirmation form scrolling #96203 diff itself adds the isCompact prop, the receiptEmptyStateCompact style (height: 52 + overflow: 'hidden'), the isCompact={!compact.isCompactMode} routing, and the bare <Text style={styles.textStrong}>{translate('dropzone.addReceipt')}</Text> with no wrap guard.
  • No other PR in the release touches ReceiptEmptyState / ReceiptSection / the compact receipt hook — ruled out.
• Font-scaling mechanism confirmed: Text sets allowFontScaling={false} (Text.tsx#L80), so at minimum system font the label metrics shift while the container stays a fixed 52dp, flipping the row into word-wrap that the overflow: 'hidden' then clips.

Severity / Blast Radius

• Cosmetic only. The tap target (whole Wrapper) still works; only the visible label text is clipped.
• Narrow trigger. Requires system font size set to minimum on Android; not observed at default font sizes. Not core functionality (no auth/payments/data-loss), so it does not warrant DEMOTE-level dismissal but is a low-severity visual regression.

Root Cause

#96203 added a new compact "Add receipt" banner whose label is a plain <Text> in a flexRow with no numberOfLines={1} and no flexShrink, placed inside receiptEmptyStateCompact which hard-codes height: 52 and overflow: 'hidden'. At minimum font size the label wraps to a second line and everything past 52dp is clipped, so "receipt" disappears and only "Add" remains.

Suggested fix-forward

Add a single-line guard to the compact label so it can never wrap out of the fixed-height banner:
<Text numberOfLines={1} style={[styles.textStrong, styles.flexShrink1]}>{translate('dropzone.addReceipt')}</Text>.
Do not simply drop the fixed height/overflow — those preserve the intended compact banner size; the real defect is the missing wrap guard.