[UsersProfilePopover] Email sometimes is not visible

[Dosant]

In #182155 we improved the display of longer names and emails, so that they are nicely truncated when they don't fit.

However, this is not ideal, and we should try to display an email

@MichaelMarcialis:

Apologies for the late reply. Generally speaking, I think truncation to ellipses is a fine way to address a lack of horizontal space. However, it would be unfortunate to lose all mention of an accompanying email address, if that is indeed what is happening here (as that may be important in helping identify users).

Is this always the maximum width of this filter's popover? Perhaps we can increase this a bit to offer a bit more breathing room? Additionally, off the top of my head I'd propose one of the following:

Option 1: Move the optionally appearing email address to a line below the user name and align the text left (so it aligns nicely with the user name above it). In doing so, I'd also recommend reducing the font size to its extra small variant. This way, both pieces of text can have text truncation applied, without losing either entirely.

Option 2: If it is preferable to keep the user name and email address on the same line, apply a reasonable maximum width to the email address container, have the user name container fill the remaining available horizontal space and set both to truncate their text (so both are visible/represented, even if truncated heavily).

Thoughts?

@azasypkin:

Option 1: Move the optionally appearing email address to a line below the user name and align the text left (so it aligns nicely with the user name above it). In doing so, I'd also recommend reducing the font size to its extra small variant. This way, both pieces of text can have text truncation applied, without losing either entirely.

Not a UX/UI person or anything, but I really like this option from a functional perspective :) It's surprising how many namesakes a large organization might have, and having visibility to email might be vital.

---

also related #182561

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[H0onnn]

@Dosant Hello, Can I solve this problem ?

[Dosant]

• also consider increasing width (make sure it doesn't overflow on smaller screen)
• make sure that the tooltip includes the email