IOU - Long email or name is overflowing the border of the modal

[isagoico]

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

---

Expected Result:

Email or name should be wrapped so there's no overflowing at the edge of the modal

Actual Result:

Long email or name is overflowing the border of the modal

Action Performed:

Prerequisite: Account A should have a long email or name.

1. Log in as account A and request money to account B
2. Log in as account B and navigate to the conversation with account A
3. Click on Pay

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.55-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/168926

View all open jobs on Upwork

https://www.upwork.com/jobs/~0103190102106903c6

[MelvinBot]

Triggered auto assignment to @kadiealexander (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[kadiealexander]

Reproduced this issue in the web app:

[MelvinBot]

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

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests

[ctkochan22]

I don't think this is a daily. As its not blocking anything. But let me know otherwise

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests.

[iwiznia]

Not sure why this wasn't added an external label, adding it now.

[MelvinBot]

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[isagoico]

Issue reproducible during KI retests.

[rdjuric]

Proposal

This also happens in our chat if the name is long enough (or the screen small enough)

Both screens use our ReportActionItemFragment of type TEXT to render the display name. We can fix it by specifying width: 100% in the containerStyle we pass to our ToolTip component. I'll get passed to our Hooverable (the component that wraps our displayName) and fix the issue in both screens.

[MelvinBot]

Triggered auto assignment to @Luke9389 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[devpanther]

Proposal

This a styling issue and it is caused by the flex-shrink attached, once this is removed or actually made to shrink rather than overflow. We can solve this issue and other places it might be appearing

[Luke9389]

@rdjuric Can you clarify what you meant to say with this?

I'll get passed to our Hooverable

[rdjuric]

@rdjuric Can you clarify what you meant to say with this?

Sorry! I meant to say that our ToolTip component can take a containerStyle prop, and that it passes it to our Hoverable component and to the View that wraps our text here:
https://github.com/Expensify/Expensify.cash/blob/5add245777dbcb7826f2444601debe15249bf7f1/src/components/Tooltip/index.js#L177-L188

[Luke9389]

Ah, OK cool, thanks!

So you're thinking we should just put width: 100% in that containerStyle?

[rdjuric]

Ah, OK cool, thanks!

So you're thinking we should just put width: 100% in that containerStyle?

Yes, that will make our ToolTip component stay within the width of its parent. As our text is already styled correctly, correcting our ToolTip style made the text wrap correctly.

[parasharrajat]

I am pretty sure that we want it to be trimmed with ellipsis... cc @shawnborton

[rdjuric]

@parasharrajat
Yea, I think that would look better too. And we would just need to add numberOfLines={1) to our Text (after fixing the ToolTip width)

[shawnborton]

I agree, I would just trim these with an ellipsis.

[Luke9389]

Ok, well @rdjuric you can go ahead and spin up the PR given that you've submitted you're proposal. 👍

[NicMendonca]

@rdjuric can you please apply to the job in Upwork so we can start the contract? Thanks!

[rdjuric]

@NicMendonca Done!

[isagoico]

Issue reproducible during KI retests.

[isagoico]

Issue reproducible during KI retests

[isagoico]

Issue not reproducible during KI retests

[rdjuric]

I can't repro this on staging. Can you give more details @isagoico?

[isagoico]

This was a mistake on my part. Issue was not reproducible during KI retests 🎉 fixing the comment.

[NicMendonca]

Thanks everyone!