mWeb - Group chat - Members of the group in header is going above the boundary

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to https://staging.new.expensify.com and login
2. Open Group DM with a 7 members

Expected Result:

I must seeing ellipsis for the group created

Actual Result:

No ellipsis for large group members in big screen devices and goes beyond the boundary

Workaround:

Visual

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.1.31-0
Reproducible in staging?: Yes
Reproducible in production?: No
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub

[OSBotify]

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

[MelvinBot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

it could be a regression from my PR. I will check this today.

[chiragsalian]

any update on this @parasharrajat, just asking because its a blocker so we treat these as hourly.

[parasharrajat]

I debugged this issue and yes, this is a side-effect of my PR #7254.
But, this is not an issue caused by that change. Instead, we should fix this.

Safari does not wrap the text if the text contains whitespaces and its multiple for white-sapce:pre. This issue is not visible on LHN as we have added white-space:nowrap to the styles.

Now there are two ways to fix.

1. Either we pass numberOfLines = {2}, it will give you the exact result that was present before.
2. Or, we add white-space:nowrap to the styles so that it can be clipped on a single line.

Now you let me know what do you want me to do. I will create PR asap.

Also, I have found another issue related to Tooltip, When the text expands multi-lines and some part of is clipped away. The tooltip is not placed correctly. It happens as we are not adjusting the vertical position of the tooltip. This behavior is only present on DisplayNames component. We need another method like getTooltipShiftX but for the Y axis.

[chiragsalian]

Sure can you create the PR to fix this @parasharrajat?

[chiragsalian]

oops, i didnt read your comment the first time properly mentioning two ways to fix. I think both are fine. I might suggest solution 2 just cause its easier for now, provided it doesn't break something else.

[stitesExpensify]

I am not able to reproduce this bug.

[stitesExpensify]

Hmm i could repro on my physical device but not the sim for some reason.