User dropdown buttons are wrapping

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

image

(Chromium on Linux)

3 „Gefällt mir“

Perhaps something for @awesomerobot to look at tomorrow?

2 „Gefällt mir“

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 „Gefällt mir“

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

regardless of zoom level

5 „Gefällt mir“

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

6 „Gefällt mir“

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 „Gefällt mir“

Oh, much better! Super, even:

image

:hugs:

3 „Gefällt mir“

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

Medium:
image

vs Large:

6 „Gefällt mir“

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 „Gefällt mir“