Increase header email column size, truncate email #1412
Conversation
**Why**: Currently, longer emails can break into multiple lines in the header. **How**: Increased column size for welcome message+email. Truncate very long emails. It was necessary to add a truncate wrapper class to the parent element, since we want to selectively truncate only a portion of the content, not the entire line.
|
This looks good! I did notice a few related issues that we can either try and address in this PR or make separate issues for (let me know if thats what you want and I can create the issues). I think we should apply the same truncation within the profile content. I think we may have lost that functionality during the last refresh:
And also on mobile: |
|
@hursey013 Oh yeah, that doesn't look good. I'll update the PR. |
|
I added the truncate class to the header on mobile, and to each of the content rows in the personal information table!
|
el-mapache
force-pushed
the
ab-adjust-account-header-columns
branch
from
c1809e5
to
ef83ff9
Compare
|
Header portion looks good, the email address in the profile information box seems to truncate too early on mobile and desktop though. Is it possible to expand the width of those columns or does that have unintended side effects?
|
|
On mobile at least, it seems like since the email address is on its own line it could probably span the width of the box. |
|
It would just involve changing the column sizing there. I can't recall if there was a specific design reason they are sized the way they are, its probably fine to update them. EDIT: I see now that we have the columns sized the way they are because the designs specified that each of the edit action buttons should fit inline. Most of them would with a smaller column size, but not the 'get a new key' button. If it seems fine to have that break onto a new line, I can update the columns. |
|
The email won't ever be able to span the entire line however, its contained inside a parent div that needs to accommodate the If we want the information to be full width, we would need to duplicate the data in a hidden div, and only show it on mobile screens. |
|
Ah, gotcha, that makes sense. It looks like we may be able to gain a few more pixels by making it the full width of the parent container on mobile, guessing that will be sufficient. |
**Why**: These could also overflow, or cause undesireable line breaks
el-mapache
force-pushed
the
ab-adjust-account-header-columns
branch
from
ef83ff9
to
285a1a2
Compare
|
Yep, already pushed up! 😄 |
Why: Currently, longer emails can break into multiple lines in the
header.
How: Increased column size for welcome message+email. Truncate very
long emails. It was necessary to add a truncate wrapper class to the
parent element, since we want to selectively truncate only a portion of
the content, not the entire line.
Screenshots:
Shorter email:
Longer email:
