[HOLD for payment 2024-04-15] [$250] mWeb - Task - Assigned to email id is cut off in task details page

[lanitochka17]

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: 1.4.55
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
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap on a report
3. Tap plus icon --- assign task
4. Enter title and tap next
5. Tap confirm task
6. Open the task to open task details page
7. Tap assignee
8. Select long email id without username

Expected Result:

Assigned to email id must be fully visible in task details page

Actual Result:

Assigned to email id is cut off in task details page

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

Bug6420709_1710951622438.en.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e143012ae57472ed
• Upwork Job ID: 1773479387196997632
• Last Price Increase: 2024-03-28
• Automatic offers:
• dukenv0307 | Reviewer | 0
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@mallenexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[ra-md]

Proposal

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

Assigned to email id is cut off in task details page

What is the root cause of that problem?

Currently, there is no styling implemented to prevent text from overflowing the content box.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Line 106 in 873b8d0

style={[styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}

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

We can add styles.breakAll or styles.breakWord here.

style={[styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}, styles.breakWord]}

What alternative solutions did you explore? (Optional)

N/A

[Krishna2323]

Proposal

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

mWeb - Task - Assigned to email id is cut off in task details page

What is the root cause of that problem?

We haven't added styles.breakWord on the View inside TaskAction

App/src/components/ReportActionItem/TaskAction.tsx

Line 20 in 4aecfcb

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

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

Add styles.breakWord/styles.breakAll & styles.preWrap.

We should also check for similar bugs happing in similar places.

Note

This also happens when updating the description.

Result

Optional

1. We can add breakWord stylings in MentionUserRenderer, but that won't completely solve the issue.
   

   App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

   Line 106 in 873b8d0

   style={[styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}

2. We can add breakWord stylings in defaultTextProps, this way it will be applied to every html renderer.
   

   App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

   Line 85 in 4822c1b

   const defaultTextProps: TextProps = useMemo(() => ({selectable: textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [textSelectable]);

[Krishna2323]

Proposal updated

[mallenexpensify]

Checking on internally. Not a high priority to get this fixed
https://expensify.slack.com/archives/C03TME82F/p1711312813672779

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.