Expense - Unreported expense row is broken, amount

[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.62-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: #83127
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: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to self DM.
3. Create an expense.
4. Go to workspace chat.
5. Create an empty report.
6. Click Add expense on the empty report > Add unreported expense.

Expected Result:

Unreported expense row will look the same as production.

Actual Result:

Unreported expense row is broken. Amount is missing.

The same issue also happens in merge expenses list.

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

[melvin-bot]

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

[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: #83127 - "Add inline editing to transaction table cells" by @mohammadjafarinejad (High confidence)
Related Issues: None

Recommendation: REVERT

PR #83127 changed the TotalCell component in a way that breaks the display of the amount in the unreported expense row. The fix requires reverting this App PR.

Assigned: @mohammadjafarinejad (PR author), @puneetlath (approving reviewer) from highest-confidence causing PR only
Labels: No label changes needed — DeployBlockerCash is correct (this is an App/frontend bug, staging-only)

Details

Evidence

• The issue is only reproducible on staging (not production), and PR feat: Add inline editing for tables on desktop #83127 is listed in the current StagingDeployCash deploy checklist.
• melvin-bot automatically assigned the PR author based on the link in the issue test reference field.
• The issue affects the "Add unreported expense" flow, specifically the unreported expense row where the amount is missing.

Verification

Affected file: src/components/TransactionItemRow/DataCells/TotalCell.tsx

PR #83127 modifies this file directly. The key change causing the bug is in the TextWithTooltip style inside TotalCell:

Before (production):

style={[styles.optionDisplayName, styles.justifyContentCenter, styles.flexShrink0]}

After (staging, this PR):

style={[styles.optionDisplayName, styles.justifyContentCenter, styles.flexShrink1, styles.textAlignRight]}

flexShrink0 prevents the text from shrinking below its natural size. Changing it to flexShrink1 allows the text to shrink to zero when neighboring flex children (DateCell + separator dot + TypeCell) consume available space.

The narrow layout renders TotalCell inside a constrained flex row (lines 756-776 in TransactionItemRow/index.tsx):

<View style={[styles.flexRow, styles.alignItemsCenter, styles.minHeight5, styles.maxHeight5]}>
    <DateCell ... />
    <Text> • </Text>
    <TypeCell ... />
    {!merchantOrDescription && (
        <View style={[styles.mlAuto]}>
            <TotalCell ... />  {/* amount is missing here */}
        </View>
    )}
</View>

With flexShrink1, the amount text can collapse to nothing when sibling elements are present, making it visually invisible.

Root Cause

PR #83127 refactored TotalCell to support inline editing by wrapping the display text in an EditableCell component. As part of this refactor, the text style was changed from flexShrink0 to flexShrink1 to accommodate right-alignment in the large-screen editable table layout. However, this style is also used in the narrow/mobile layout where TotalCell is rendered inside a tight flex row context. With flexShrink1, the amount text is allowed to shrink to zero when there is not enough space, causing the amount to disappear entirely in the unreported expense row.