The badge boxes are going crazy!

Continuing the discussion from Make the badge boxes for user card larger [mobile]:
Now the badge boxes have different sizes causing the lengths to vary as seen here:


Can someone fix this? Thanks.

That update was for a theme component so it has no effect unless you have it installed. We have that component installed here on Meta and I cannot reproduce the issue.

I’m also not able to reproduce the issue you’re reporting on your site - which doesn’t have the component installed - can you please provide more details like what device / browser you’re seeing the issue on?

4 Likes

I’m currently using a MacBook Pro (13-inch, 2016, Four Thunderbolt 3 Ports), and using safari Version 12.0.3 (13606.4.5.3.1) and Chrome Version 71.0.3578.98 (Official Build) (64-bit). I see this in both browsers. Try going to this post and checking the user card of the person called Emidoge.

1 Like

Thanks for that. I have a repro on Mac. I’ll push a fix soon.

3 Likes

It turns out that this was not a MacOS-only issue. I’m also able to reproduce it on non-MacOS devices.

I believe it was caused by the fact that we recently bumped up the base font-size on desktop; however, that was not the real problem. The badge-section in user-cards was limited to a width of 500px whereas the card itself has a width of 580px.

User-cards only show 3 badges and a “+N more” link if there are more than three. The issue reported only occurs if the names for the three badges displayed are long - the biggest culprit in core being the “New User of the Month” badge.

I’ve removed the width constraint on the badge-section and it should now be the full-width of user-cards which should prevent the problem from happening.

Thanks for reporting the issue @Chaboi_3000 :+1:

5 Likes

This topic was automatically closed after 20 hours. New replies are no longer allowed.