# 모바일에서 게시물 배지가 정렬되지 않음

**URL:** https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054
**Category:** UX
**Tags:** badges, mobile
**Created:** [1월 7, 2025, 6:59오후 UTC](https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054 "2025-01-07T18:59:22Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![MatthewL246](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matthewl246/32/463053_2.png) [@MatthewL246](https://meta.discourse.org/u/MatthewL246)
#### Post date: [1월 7, 2025, 6:59오후 UTC](https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054/1 "2025-01-07T18:59:22Z")

</div>

이 문제는 [Wishlist: visual cue for "user got a badge for this post"](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923?u=matthewl246) 와 관련이 있습니다.

데스크톱 뷰에서는 배지가 사용자 이름과 제목 뒤에 표시됩니다:

 ![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.)](https://global.discourse-cdn.com/meta/original/4X/c/0/2/c02add04623d6c31879d344b4d3cedffbc13a315.png)

그러나 모바일에서는 배지가 사용자 이름 앞에 표시되어, 사용자 이름과 제목이 같은 위치에서 시작되지 않아 정렬이 어긋나는 것처럼 보입니다:

 ![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.](https://global.discourse-cdn.com/meta/original/4X/0/b/9/0b963cf335e9d6d7361ae524fe0ae7d952151a56.png)

안전 모드([Safe mode](https://meta.discourse.org/t/53504?silent=true))에서는 아무 변화가 없습니다. 개인적으로는 배지가 이름 뒤에 표시되는 데스크톱 뷰와 유사하게 모바일 뷰가 표시되기를 선호합니다.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [1월 8, 2025, 8:52오후 UTC](https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054/2 "2025-01-08T20:52:43Z")

</div>

모바일이 데스크톱과 동일한 경험을 제공하도록 하는 것이 합리적이라고 생각하는데, 해당 기능의 개발자인 @pento님은 어떻게 생각하시나요?

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [1월 8, 2025, 10:34오후 UTC](https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054/3 "2025-01-08T22:34:07Z")

</div>

버그 리포트 감사합니다, @MatthewL246!

그것도 좀 어색해 보이네요. 깔끔하게 정리해 보겠습니다.

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [1월 9, 2025, 6:28오전 UTC](https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054/5 "2025-01-09T06:28:20Z")

</div>

이 문제를 수정하는 패치를 병합했습니다. @MatthewL246 님, 추가로 문제가 발생하면 알려주세요!

![](https://global.discourse-cdn.com/meta/original/4X/9/1/5/91535fa57dbb8707a5bd8e415def2d842a188000.png)

> <https://github.com/discourse/discourse/pull/30665>
>
> \## ✨ What's This?
> 
> Reported on \[meta\](https://meta.discourse.org/t/badges-in-p…osts-look-misaligned-on-mobile/346054).
> 
> Due to more explicit CSS flex arrangement on mobile devices, user badges were being shoved out of alignment. This PR nudges them back into line.
> 
> \## 📺 Screenshots
> 
> !\[\](https://github.com/user-attachments/assets/c432ea80-18ae-4811-8ab2-b545bccd9e05)
> 
> \## 👑 Testing
> 
> Test on additional mobile device sizes, check that user badges are correctly aligned.

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [1월 12, 2025, 9:00오후 UTC](https://meta.discourse.org/t/badges-in-posts-look-misaligned-on-mobile/346054/7 "2025-01-12T21:00:43Z")

</div>

이 주제는 3일 후 자동으로 닫혔습니다. 더 이상 답변이 허용되지 않습니다.