Search - In search, expense with big amount are shown in ellipsis

[izarutskaya]

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: v9.0.65-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open 1:1 chat with a user
3. Submit a expense eg - BSD 85578899.00
4. Navigate to LHN - search

Expected Result:

In search, expense with big amount must not be shown in ellipsis.

Actual Result:

In search, expense with big amount are shown in ellipsis.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Standalone
• [x] Android: HybridApp
• [x] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/fe6a1220-8987-4da8-9155-c160c9ff7559

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In search, expense with big amount are shown in ellipsis.

What is the root cause of that problem?

Although the default merchant is hidden, we always add this View with flex: 2

https://github.com/Expensify/App/blob/00a81dc63f265a9f90a29f2d744a70465924f7f1/src/components/SelectionList/Search/TransactionListItemRow.tsx#L312

https://github.com/Expensify/App/blob/00a81dc63f265a9f90a29f2d744a70465924f7f1/src/components/SelectionList/Search/TransactionListItemRow.tsx#L313

And the total wrap view has flex: 1 https://github.com/Expensify/App/blob/00a81dc63f265a9f90a29f2d744a70465924f7f1/src/components/SelectionList/Search/TransactionListItemRow.tsx#L328

So two columns split the remain width width scale 2:1 and the amount wrap view cannot take the max width possible

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

We should only render this View if the merchant or category is displayed

{(!!item.formattedMerchant || !!item?.comment?.comment || !!item.category) && (
    <View style={[styles.flex2, !item.category && styles.justifyContentCenter, styles.gap1]}>
        <MerchantCell
            transactionItem={item}
            showTooltip={showTooltip}
            isLargeScreenWidth={false}
        />
        {!!item.category && (
            <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd]}>
                <CategoryCell
                    isLargeScreenWidth={false}
                    showTooltip={showTooltip}
                    transactionItem={item}
                />
            </View>
        )}
    </View>
)}

https://github.com/Expensify/App/blob/00a81dc63f265a9f90a29f2d744a70465924f7f1/src/components/SelectionList/Search/TransactionListItemRow.tsx#L312

What alternative solutions did you explore? (Optional)

[stephanieelliott]

This is expected behavior, not a bug. It's happening because the entry is too long to fit into the field.