User dropdown buttons are wrapping

Contribute UX

AI-generated summary

A discussion was started by supermathie who reported that user dropdown buttons are wrapping on meta and review pages when viewed in Chromium on Linux. awesomerobot suspected the issue was caused by the addition of a scrollbar affecting the width, and made an initial fix by reducing the max-width of the username. However, supermathie discovered that the issue was actually caused by a Chromium setting. awesomerobot then made a more effective fix by removing hardcoded widths and prioritizing space for icons, allowing the menu to better handle varying content sizes. This fix also improved the truncation of long usernames. supermathie confirmed the fix was successful. Additionally, supermathie requested a similar fix for the wrench menu, which awesomerobot also implemented.

1

Just noticed these buttons are wrapping for me on meta & review:

image
image384×176 8.05 KB

(Chromium on Linux)

3 Likes
2

Perhaps something for @awesomerobot to look at tomorrow?

2 Likes
3

I can’t reproduce this on Windows/MacOS… I suspect the addition of the scrollbar is messing the width up… so I’ve reduced the max-width of the username a bit and shaved off a few pixels of padding.

https://github.com/discourse/discourse/commit/c7d75bc3a0ff6f9052f4cfe3654ab4afe160cf12

2 Likes
4

After some investigation, the culprit is this (in Chromium settings)

image
image748×185 13.9 KB

regardless of zoom level

5 Likes
5

oohh that’s helpful, I think I can get a better fix in for that

6 Likes
6

ok this is a good fix! I was able to remove some of our hard-coded widths in that menu area so now we can better handle situations where there’s a lot of content crammed in there.

In the flex layout I’m prioritizing space for the icons, so they should never wrap and will instead truncate more of the username as needed. On the flipside this also means we handle truncating the username better in general, so long usernames will also truncate less than they did previously (when there’s more space available at the default font size)…

https://github.com/discourse/discourse/commit/32e40ea1337150f271761179178d5e8a1d52cf42

4 Likes
7

Oh, much better! Super, even:

image
image398×297 24.9 KB

:hugs:

3 Likes
8

Can you do your same magic on the :wrench: menu?

Medium:

image
image244×489 17.6 KB

vs Large:

image
image234×649 19.2 KB

6 Likes
10

This should do the trick, similar issue… we had a hardcoded width in there. It should scale better with font-size changes now:

https://github.com/discourse/discourse/commit/688d9428fe9cb2d96d1742cb6d09efd45776b073

4 Likes