Multisite: Site names are truncated in the "My Sites" admin bar dropdown

[tferry]

When using a multisite network, hovering over the "My Sites" item in the WordPress admin bar reveals a list of sites in the network. However, unless the site names are particularly short (~less than 15 characters) they are truncated and replaced with an ellipsis using CSS. The dropdown does expand when sites with longer names are added but the longest names are still truncated in this way.

I believe it would be useful to display the full name of all sites, especially as site "identifiers" may be placed at the end. For example, it might make sense to differentiate different language versions of the same site with the locale/language at the end. Unfortunately;

"My Longish Site Name - EN-US",
"My Longish Site Name - ES-ES",

becomes:

"My Longish Site Name - E...",
"My Longish Site Name - E...",

Which causes a bit of a UI problem. I'm sure there are other reasons to differentiate sites in this way too.

It seems that the cause of this truncation is down to the floated "blavatar" icon next to each site name pushing the text over, rather than a conscious decision to hide the end of the text.

Since there doesn't seem to be a reason to chop off the end of the text in this way, I'd suggest some slight CSS changes to allow the full text to be visible in the dropdown. I have attached a first-pass diff as a starting point to address this.

[tferry]

Updates CSS in wp-includes/css/admin-bar.css to show full site names in menu dropdown

[johnjamesjacoby]

Hey @tferry! 👋 I think this is a great idea, and love that you’ve added a patch already.

These menus in particular have had several deep UX dives over the years, the result of which ended up cumulatively and unintentionally preventing much iteration from happening.

There is much that could be done, and I support making small improvements like this one, towards a greater goal of providing an improved site-picking experience.

I’m going to add the needs-screenshots tag to this, as I think a before & after will help quickly illustrate the problem and proposed solution to a wider audience. (You don’t need to be the person to make them, unless you’re willing & able.)

Great work!

[afercia]

Screenshots can be added also by committers :D

[tferry]

Shows the "My Sites" menu with the patch applied

[tferry]

Hey @johnjamesjacoby 👋 thanks for the feedback, much appreciated! And thank you @afercia for the before screenshot too 🙌

I've uploaded an after screenshot, with the patch applied, to show what a difference it could make to users - hopefully a useful addition!

[jeremyfelt]

It looks like the ellipsis was added with the MP6 merge in [26072] as part of #25858. This was added to MP6 in that plugin's ​r769624 changeset.

Changing this makes sense to me as long as we're confident that the original issue (text overflowing the arrow on the right) remains solved.

[SergeyBiryukov]

[45826] missed the ticket:

In 45826:

Multisite: Remove truncation to allow clearers identification of longer site names

Previously the sites were truncated which meant longer names but with ending identifications were unable to be seen as different. This shows the full site name to allow easier understanding.

Props tferry, melinedo, afercia, jeremyfelt
Fixes: 47112