User dropdown buttons are wrapping

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

image

(Chromium on Linux)

3 إعجابات

Perhaps something for @awesomerobot to look at tomorrow?

إعجابَين (2)

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)

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

regardless of zoom level

5 إعجابات

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

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 إعجابات

Oh, much better! Super, even:

image

:hugs:

3 إعجابات

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

Medium:
image

vs Large:

6 إعجابات

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 إعجابات