Badges in posts look misaligned on mobile

Contribute UX
,
1

This is related to the feature Wishlist: visual cue for "user got a badge for this post".

In the desktop view, the badges display after the username and title:

A topic titled "Testing topic" is displayed in the desktop view. The first post is by an admin user with the title "Ambulance," and a bronze heart badge is displayed to the right of the user title.)
A topic titled "Testing topic" is displayed in the desktop view. The first post is by an admin user with the title "Ambulance," and a bronze heart badge is displayed to the right of the user title.)776×254 7.92 KB

However, on mobile, the badges display before the username, creating a misaligned look because the username and title don’t start in the same place:

A topic titled "Testing topic" is displayed in the mobile view. The first post is by an admin user with the title "Ambulance," and a bronze heart badge is displayed to the left of the username.
A topic titled "Testing topic" is displayed in the mobile view. The first post is by an admin user with the title "Ambulance," and a bronze heart badge is displayed to the left of the username.409×227 6.89 KB

Safe mode doesn’t change anything. Personally, I would prefer the mobile view to look similar to the desktop view, where the badges display after the name.

4 Likes
2

Sounds reasonable to have mobile match desktop, what do you think @pento (as the author of the feature)?

3 Likes
3

Thank you for the bug report, @MatthewL246!

I agree that does look a bit janky, I’ll see what I can do to tidy it up.

4 Likes
5

I’ve merged a fix for this, please let us know if you run into any further issues with it, @MatthewL246!

https://github.com/discourse/discourse/pull/30665

4 Likes
7

This topic was automatically closed after 3 days. New replies are no longer allowed.