UserDialogUserEmail text overflow

[rmatuszczakp]

Hello, we are working on a project where we use the UserDialog component. It seems that when the text within UserDialogUserEmail is too long it overflows. We couldn't find any props that would halp us overcome that issue. Do you have any recommendations?

https://paste.twilio.design/components/user-dialog

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Disclosure heading overflow (updated: 02/29/2024, similarity score: 85%)
• Dropdown component is cut-off in the modal - Answer (updated: 10/18/2022, similarity score: 84%)
• Toast overflows the screen on mobile view (updated: 03/17/2023, similarity score: 84%)

[krisantrobus]

Hey @rmatuszczakp, great catch on this. This components wraps correctly when there are word breaks as expected but for an email field it would not be expected there would ever be a break.

My suggestion would be to use our Truncate component. Your code would look something like this:

<UserDialogUserEmail>
            <Truncate title="[email protected]">[email protected]</Truncate>
</UserDialogUserEmail>

The outcome would be:

[btjfsu]

This is what One Admin uses as well.