User dropdown buttons are wrapping

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

image

(Chromium on Linux)

3 Me gusta

Perhaps something for @awesomerobot to look at tomorrow?

2 Me gusta

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 Me gusta

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

regardless of zoom level

5 Me gusta

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

6 Me gusta

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 Me gusta

Oh, much better! Super, even:

image

:hugs:

3 Me gusta

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

Medium:
image

vs Large:

6 Me gusta

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 Me gusta