Search - Some of the expense amounts are truncated

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.41-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with an old account that has a lot of expenses
3. Click on "Search"
4. Scroll down

Expected Result:

Expense amounts should be fully visible

Actual Result:

Some of the expense amounts are truncated. Android is more affected than web or desktop. Different expenses are truncated on different environments. Short and long amounts can be both truncated

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6618645_1727542220559.bandicam_2024-09-28_18-41-12-732.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (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.

[etCoderDysto]

Proposal

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

Search - Some of the expense amounts are truncated

What is the root cause of that problem?

We are not passing numberOfLines={0} below, and the amount is truncated since the defaultNumberOfLines = 1

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Lines 166 to 169 in 0e3b82c

	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={amount}
	style={[styles.optionDisplayName, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}

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

We should pass numberOfLines={0}

What alternative solutions did you explore? (Optional)

We can assign numberOfLines 0 for only small screens since there is tooltip for large screens

numberOfLines={isLargeScreenWidth ? 1 : 0}

Result

Screen.Recording.2024-09-30.at.4.45.54.in.the.afternoon.mp4

[nyomanjyotisa]

Proposal

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

Search - Some of the expense amounts are truncated

What is the root cause of that problem?

We use styles.flex1 for the total cell container, so the width of the container will be not enough for large amount

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

We should change to styles.flex2

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 328 in 4b5c0ff

<View style={[styles.alignItemsEnd, styles.flex1, styles.gap1, styles.justifyContentBetween]}>

What alternative solutions did you explore? (Optional)

[etCoderDysto]

Proposal updated

• Added result