UserMenu: email addresses with hyphens wrap and break the layout

[markwilcox]

The UserInfo component in the UserMenu prevents the user's name from wrapping, but not the email. Of course email addresses don't usually contain whitespace, but a hyphen is fairly common and counts as a whitespace character for the purposes of text wrapping.

This is:

• Bug

Specifications

• version: v4.9.0
• OS: Any
• Browser: Any (but tested in Chrome and Safari)

Expected Behavior

An email address containing a hyphen should not wrap.

Actual Behavior

The email address does wrap, then by taking up 2 lines squeezes the content to the edges of the fixed height header. If the half-address parts and name are short enough it also causes the menu items below to wrap too - e.g. Dark mode, Send feedback and even Sign out can end up on 2 lines each. It might be worth separately giving the whole menu a minimum width.

Steps to Reproduce the Problem

1. Open CMS (or other app), signed in with a user that has a hyphen in their email address.
2. Click on the user initials (top right)
3. See the email address has wrapped to 2 lines!

Possible Solution

We can solve this by adding the same CSS the user name already has to the email address to prevent wrapping.