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: https://github.com/Expensify/App/pull/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:

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

Screenshots/Videos

https://github.com/user-attachments/assets/0e8bf0a3-b860-4a65-83f9-af9623a34703

View all open jobs on GitHub

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[bot]]

:wave: 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. https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemSingle.tsx#L255-L257

However, the style prop is not used for the text component. https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemFragment.tsx#L168-L172

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. https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemFragment.tsx#L168-L172

For the & becomes ellipsis, we need to add flexShrink0 to the text so it never shrinks. https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemSingle.tsx#L266-L271

Last, replace the flex1 style with flexShrink1 style. https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemSingle.tsx#L256-L257 https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemSingle.tsx#L272-L273 https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemSingle.tsx#L288-L289

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(?). https://github.com/Expensify/App/blob/ab5175c3d48061cd8fb422bab448a4a61caf018b/src/pages/home/report/ReportActionItemSingle.tsx#L339-L340

Result:

[melvin-bot[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 https://github.com/Expensify/App/pull/50557 assigning Georgia so you dont loose track of this