Frontend UI/UX: AppNavUserMenu bugged display

[samjespersen]

Problem:

The Paper component in AppNavUserMenu does not resize according to the content of its Text child, which then overflows out of its parent

Solution:

This can be solved by setting the truncate prop of the Text components to end and giving their containing div a min-width of 0:

But wait!

Now that the text is truncating properly, there needs to be a way of displaying the full user name and team name.

A couple of ideas:

Use a Tooltip:

OR

Expand element width on hover:

[samjespersen]

Personally, I like expanding the element width on hover, and it even does a neat animation (only supported on Chrome unfortunately)

Screen.Recording.2025-02-14.at.11.38.34.AM.mov

[teeohhem]

Thanks for opening the issue and recommending some fixes! The most common pattern I’ve seen is truncating with ellipses via css text-overflow and showing the full text on hover. https://www.patternfly.org/ux-writing/truncation/

I think that would be a fine approach here.