# PM Inbox의 .user-main .controls가 반응형 너비 레이아웃을 깨뜨립니다

**URL:** https://meta.discourse.org/t/pm-inbox-user-main-controls-breaking-responsive-width-layout/319233
**Category:** UX
**Tags:** css
**Created:** [7월 30, 2024, 1:08오후 UTC](https://meta.discourse.org/t/pm-inbox-user-main-controls-breaking-responsive-width-layout/319233 "2024-07-30T13:08:07Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [7월 30, 2024, 1:08오후 UTC](https://meta.discourse.org/t/pm-inbox-user-main-controls-breaking-responsive-width-layout/319233/1 "2024-07-30T13:08:07Z")

</div>

안녕하세요, Discourse Meta와 제 Discourse 인스턴스 모두에서 개인 메시지의 `.user-main .controls` 영역에 있는 “Expand” 버튼이 1920x1080 화면 해상도의 약 2/3라는 합리적인 브라우저 폭에서도 브라우저 창 너비를 벗어나는 문제가 발생합니다. Firefox와 Chromium에서 동일한 결과가 나타납니다:

 ![Screenshot from 2024-07-30 07-56-28](https://global.discourse-cdn.com/meta/original/4X/f/2/6/f26e2735aa17d4065df8119343dc17e452f61251.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [9월 11, 2024, 9:30오후 UTC](https://meta.discourse.org/t/pm-inbox-user-main-controls-breaking-responsive-width-layout/319233/2 "2024-09-11T21:30:04Z")

</div>

이제 이 버튼들은 줄바꿈되어야 하며 더 이상 넘치지 않아야 합니다

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/0/b/30b1281efeff8242dee300953a28e7c7e84b5b0c.png)

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [9월 11, 2024, 10:07오후 UTC](https://meta.discourse.org/t/pm-inbox-user-main-controls-breaking-responsive-width-layout/319233/3 "2024-09-11T22:07:27Z")

</div>

@Kris 님, 이 일을 기억해 주셔서 감사합니다!  
혹시 이 수정이 3.3 안정화 브랜치에 반영될까요?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [9월 12, 2024, 1:58오후 UTC](https://meta.discourse.org/t/pm-inbox-user-main-controls-breaking-responsive-width-layout/319233/4 "2024-09-12T13:58:54Z")

</div>

> [@rahim123](#):
>
> 이 수정 사항이 3.3 안정판(Stable) 브랜치에 포함될 가능성이 있을까요?

아니요, 그렇게 되지는 않을 것 같습니다. 이러한 인터페이스 문제는 일반적으로 경미한 문제로 간주되며, 안정판으로 변경 사항을 백포트하는 과정은 보통 기능 오류를 일으키거나 보안 문제를 유발하는 버그에 한해 진행되는 더 복잡한 절차입니다.

그동안 테마에 작은 CSS를 추가하거나, 레이아웃을 개선할 수 있는 별도의 테마 컴포넌트를 추가할 수 있습니다.

```css
.desktop-view .user-main .about.collapsed-info .controls > ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: end;
}

```

이것은 Discourse에 직접 추가된 해결책만큼 완벽하지는 않지만, 업데이트가 가능해질 때까지 컨트롤이 줄바꿈되어 넘침(overflow)을 방지할 수 있게 해줍니다.