# 모바일에서 인용구 바 정렬 문제
**URL:** https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894
**Category:** UX
**Tags:** mobile
**Created:** [7월 11, 2024, 9:27오전 UTC](https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894 "2024-07-11T09:27:26Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 11, 2024, 9:27오전 UTC](https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894/1 "2024-07-11T09:27:27Z")
안녕하세요 👋
모바일에서 인용 바 버튼에 이전보다 더 많은 옵션이 추가되었습니다. 이제 인용 복사와 AI에게 질문 버튼도 있어 버튼 영역이 더 넓어졌고, 작은 화면에서는 특히 이러한 라벨의 번역이 긴 언어의 경우 화면 밖으로 쉽게 넘칠 수 있습니다.
헝가리어의 경우 훨씬 더 심합니다…
가장 좋은 해결책 중 하나는 버튼을 세로 방향으로 정렬하는 것일 것입니다. 현재 버튼은 \*(composer, modal, toast)\*를 트리거하고 인용 바를 닫습니다. 이전에는 \*(Edit, Ask AI)\*의 경우 인용 바가 열려 있는 상태였습니다. 이렇게 하면 더 많은 여유 공간이 생기고 버튼 조작이 훨씬 쉬워집니다.
다음과 같은 형태입니다:
모바일 / CSS
```scss
.quote-button {
.buttons {
flex-direction: column;
> *:not(:last-child) {
border-bottom: 1px solid var(--primary-low);
}
> .btn,
.ai-post-helper__trigger {
width: 100%;
padding: 0.65em;
justify-content: flex-start;
}
}
}
```
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [7월 11, 2024, 10:07오전 UTC](https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894/2 "2024-07-11T10:07:13Z")
[Hide text in text select popup menu - Feedback](https://meta.discourse.org/t/hide-text-in-text-select-popup-menu-feedback/287656) 링크 앞의 텍스트를 제거하는 디자인 실험이 있었어요. 하지만 저는 당신의 해결책이 훨씬 더 마음에 들어요!
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [7월 11, 2024, 3:45오후 UTC](https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894/3 "2024-07-11T15:45:34Z")
현재 구현 방식이 아쉬운 부분이 있다는 지적에 전적으로 동의합니다.
제안하신 방식은 첫인상부터 마음에 듭니다. 하지만 오른쪽 가장자리의 단어(예: 이 경우의 “pretty”)나 더 큰 텍스트 조각을 선택했을 때 어떻게 동작할까요? 이 두 가지 상황 모두 화면 밖으로 밀려날 수 있습니다. 일반적으로 이러한 요소의 위치 지정은 어려운 부분인 경우가 많습니다.
가능하다면 스크린샷 외에도 실제로 동작하는 모습을 보고 싶습니다.
(하지만 현재 가로 방향 오버플로 문제는 확실히 수정해야 합니다!)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 11, 2024, 4:07오후 UTC](https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894/5 "2024-07-11T16:07:45Z")
> [@chapoi](#):
>
> 하지만 오른쪽 가장자리의 단어(예를 들어 이 경우의 “pretty”)나 더 큰 텍스트 조각을 선택할 때 어떻게 동작하나요? 두 상황 모두 화면 밖으로 밀려날 수 있습니다. 일반적으로 이러한 요소들의 위치 지정은 어려운 부분인 경우가 많습니다.
꽤 잘 정렬됩니다.
테마 생성자 데모입니다: [Theme Creator](https://discourse.theme-creator.io/theme/Don/quote-bar)
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [7월 17, 2024, 2:52오후 UTC](https://meta.discourse.org/t/quote-bar-alignment-on-mobile/315894/6 "2024-07-17T14:52:08Z")
[이 커밋](https://github.com/discourse/discourse/pull/27938)에서 코어에 유사한 해결책을 추가했습니다.
@Don 님, 알려주셔서 감사합니다!