Profile - Settings - Longer email is overflowing the border

[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
2. Log in with account where you haven't set up your First and Last name
3. Go to Settings

Expected Result:

Longer email isn't overflowing the border

Actual Result:

Long email is overflowing the border

Workaround:

Unknown

Platform:

Unknown
Where is this issue occurring?

• Web
• Mobile Web

Version Number: 1.0.85-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

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

[iwiznia]

@Expensify/design any ideas on how to solve this?

[MelvinBot]

Triggered auto assignment to @sylveawong (Design), see these Stack Overflow questions for more details.

[shawnborton]

I'd say we just truncate via ellipsis. This should be easy to do with RN.

[iwiznia]

Is that via a fixed number of characters or a style property that specifies that anything that does not fit will get an ellipsis?

[shawnborton]

I think you just specify that the text should only be 1 line and it should be truncated via ellipsis... https://reactnative.dev/docs/text#numberoflines & https://reactnative.dev/docs/text#ellipsizemode

[rdjuric]

I think we solved a very similar problem in #3172. We truncated via ellipsis by giving the width of the container to the text, and fixing a numOfLines=1.

[parasharrajat]

Proposal

It just needs text clipping as you said.
We need to add maxWidth:100% to pressable and all set.

App/src/pages/settings/InitialPage.js

Line 177 in 496086a

<Pressable style={[styles.mt1]} onPress={openProfileSettings}>

We are already using the clipping on text and numberOfLines 1.

[MelvinBot]

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

[JmillsExpensify]

Upwork job is here: https://www.upwork.com/jobs/~01ba5c8069caabd21c.

[MelvinBot]

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

[mfkrause]

Proposal

As already discussed here, this problem should be easy to fix by truncating the overflowing email using ellipsis. The text is overflowing because the corresponding <Text> has a parent <Pressable> container that is not limited in width:

App/src/pages/settings/InitialPage.js

Line 177 in 496086a

<Pressable style={[styles.mt1]} onPress={openProfileSettings}>

By limiting the max-width to 100%, the text would not be overflowing anymore and would be truncated:

In addition to this, based on the desired UX, you could also truncate the text before the @ symbol and instead display the full domain using some additional code logic. This would then look something like this:

Personally, I'd probably prefer the first solution since, depending on the length of the domain name, the text might be truncated twice when using the second solution.

[shawnborton]

Thanks for exploring the multiple options. I agree, I think Option 1 is best and is the most predictable across use cases.

[deetergp]

I agree that option 1 is what most folks would expect. Let's go with @parasharrajat's proposal.

[parasharrajat]

PR is up ⬆️

[isagoico]

Issue reproducible during KI retests

[deetergp]

Reviewing now…

[deetergp]

Looks good, thanks @parasharrajat 👍

[isagoico]

Issue not reproducible during KI retests (Fixed)

[MelvinBot]

@deetergp, @JmillsExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@deetergp, @JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...

[parasharrajat]

Any update on the Upwork job?

[JmillsExpensify]

Closed out the Upwork job. Feel free to message me on Slack if I can help with anything else!

[JmillsExpensify]

Also any idea why this issue didn't automatically close with the production deploy yesterday?

[JmillsExpensify]

Oh oops. I must have misunderstood your last comment. Per the linked PR this is still under the regression period, which will clear on 9/1.

[RohanPunjani]

I think the issue is fixed. Please close it 😅

[isagoico]

Issue not reproducible during KI retests (Fixed)

[deetergp]

Closing since this is no longer reproducible.