[Due for payment 2026-05-12] Android & iOS - Spend - Divider is invisible between expense rows when selected

[mitarachim]

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.64-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: #87742
Email or phone of affected tester (no customers): sdsodijnosdjoij@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro Max / iOS 26.3
App Component: Search

Action Performed:

1. Launch Expensify app.
2. Go to workspace chat.
3. Create three expenses.
4. Go to Spend > Expenses.
5. Select all expenses.

Expected Result:

Divider will be visible between expense rows when selected.

Actual Result:

Divider is invisible between expense rows when selected.

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

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[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: #87742 - "Update table and row styles for mobile search pages" by @Krishna2323 (High confidence)
Related Issues: #87460

Recommendation: REVERT

PR #87742 changed the row separator from a mb2 margin-based approach to a styles.borderBottom border-based approach, but theme.border and theme.activeComponentBG are the same color (productLight400 = #E6E1DA in light theme), making the divider invisible when a row is selected.

Assigned: @Krishna2323 (PR author), @situchan, @shawnborton, @JS00001, @luacmartins (approving reviewers) from highest-confidence causing PR only
Labels: DeployBlockerCash kept (Frontend bug — App PR caused the issue). DeployBlocker not present, no change needed.

Detailed Analysis

Evidence

• The bug manifests on iOS and Android (mobile only), not web — consistent with the !isLargeScreenWidth code paths changed in PR Update table and row styles for mobile search pages #87742
• PR Update table and row styles for mobile search pages #87742 was merged on 2026-04-27, the same day as the staging deploy, and is listed in the StagingDeployCash as entry Align web & mobile promiseAllSettled and fix bug #175 in the chronological order
• melvin-bot independently identified PR Update table and row styles for mobile search pages #87742 as the causing PR
• The issue is only reproducible on staging, not production — confirming this is a regression from the current staging batch

Verification

• Affected file: src/components/Search/SearchList/ListItem/TransactionListItem.tsx
• PR Update table and row styles for mobile search pages #87742 directly modifies this file (confirmed via gh pr view 87742 --json files)
• Before PR Update table and row styles for mobile search pages #87742, the wrapperStyle used styles.mb2 (margin-bottom of 8px) to create visual separation between rows
• After PR Update table and row styles for mobile search pages #87742, this was replaced with styles.borderBottom which sets borderColor: theme.border

Root Cause

In both the light and dark themes, theme.border and theme.activeComponentBG are defined as the same color value (productLight400 = #E6E1DA in light theme; productDark400 = #1A3D32 in dark theme). The PR replaced margin-based row separation with a border approach:

// wrapperStyle — outer container — now has the border
!isLargeScreenWidth && !isLastItem && styles.borderBottom,

// pressableStyle — inner pressable — background color when selected
item.isSelected && styles.activeComponentBG,

Because theme.border === theme.activeComponentBG, when a row enters the selected state (activeComponentBG), the bottom border of the row above it (also drawn in theme.border) becomes invisible — they are the same color. The old mb2 approach was immune to this because it created a gap (transparent space) rather than a colored border.