Expense - No "&" when the display name is long, name overlaps with time on Android & iOS

[IuliiaHerets]

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.0.47-1
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #50341
Email or phone of affected tester (no customers): applausetester+pso@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Display name is a long email.

1. Go to staging.new.expensify.com
2. Go to FAB > Submit expense.
3. Submit an expense to a user with long email as display name.
4. Go to DM with that user.

Expected Result:

On web, there will be "&" between the sender and receiver display name.
On Android and iOS app, the name will not overlap with time.

Actual Result:

On web, there is no "&" between the sender and receiver display name.
On Android and iOS app, the name overlaps with time.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6630080_1728511523633.20241010_060149.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @nkuoch (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

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

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-10-10 10:53:00 UTC.

Proposal

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

The & becomes ellipsis and the text overlaps the message date.

What is the root cause of that problem?

When the text is very long, the & is shrinked, so it only shows ellipsis. The long text also overlaps the date because we don't prevent the text to grow out of their bounds. For this overlap issue, we actually already have a flex1 style for both first and second users.

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 255 to 257 in ab5175c

	<View style={[styles.flexRow]}>
	<ReportActionItemFragment
	style={[styles.flex1]}

However, the style prop is not used for the text component.

App/src/pages/home/report/ReportActionItemFragment.tsx

Lines 168 to 172 in ab5175c

	<Text
	numberOfLines={isSingleLine ? 1 : undefined}
	style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap]}
	>
	{fragment?.text}

So the style is currently useless.

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

First, accept the style prop and apply it to the text component here.

App/src/pages/home/report/ReportActionItemFragment.tsx

Lines 168 to 172 in ab5175c

	<Text
	numberOfLines={isSingleLine ? 1 : undefined}
	style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap]}
	>
	{fragment?.text}

For the & becomes ellipsis, we need to add flexShrink0 to the text so it never shrinks.

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 266 to 271 in ab5175c

	<Text
	numberOfLines={1}
	style={[styles.chatItemMessageHeaderSender, styles.pre]}
	>
	{` & `}
	</Text>

Last, replace the flex1 style with flexShrink1 style.

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 256 to 257 in ab5175c

	<ReportActionItemFragment
	style={[styles.flex1]}

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 272 to 273 in ab5175c

	<ReportActionItemFragment
	style={[styles.flex1]}

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 288 to 289 in ab5175c

	<ReportActionItemFragment
	style={[styles.flex1]}

If we keep the flex1 style, the text won't be visible.

Because flex1 will scale based on the parent's available space, but the parent itself doesn't have a defined width(?).

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 339 to 340 in ab5175c

	<PressableWithoutFeedback
	style={[styles.flexShrink1, styles.mr1]}

Result:

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[mountiny]

Revert PR was merged #50557 assigning Georgia so you dont loose track of this

[grgia]

Closing out since we reverted the PR and I've addressed in a follow up