답글 버튼 크기가 텍스트 크기 설정에 따라 달라집니다

[Moin]

New topic controls on Meta에서 이어지는 논의입니다.

모든 버튼의 글꼴 크기를 동일하게 설정

이 부분은 모든 경우에 작동하지 않는 것 같습니다.

설정에서 더 작은 글꼴 크기를 선택했는데, 이것이 답글 버튼의 크기에 영향을 미치는 것 같습니다. 다른 버튼들보다 작게 표시됩니다. 흥미롭게도, 더 큰 글꼴 크기를 선택해도 버튼이 커지지 않습니다.

[NateDhaliwal]

내 크기는 기본값으로 설정되어 있고, 이 문제를 나도 확인하고 있습니다.

[sam (Sam Saffron)]

Hi @Moin, 보고해 주셔서 감사합니다. 저희 디자이너도 이 문제를 인지하고 있지만 아직 해결책을 찾지 못했습니다. 어떻게 해결할 수 있을지 혹시 아이디어가 있으신가요?

[traceymoko (Tracey)]

이것이 모바일에서 토픽 하단에 표시되나요?
데스크톱/태블릿에서 “답장” 텍스트 크기의 영향을 받는 것일 수 있으며, 모바일에서는 해당 텍스트가 표시되지 않습니다.

[Canapin (Coin-coin le Canapin)]

답글 버튼의 크기는 적절하다고 생각하지만, 왼쪽의 버튼들은 그렇지 않은 것 같습니다.

.topic-footer-main-buttons 영역의 다른 버튼들과 달리, 토픽 알림 버튼은 div(.topic-notifications-button)로 감싸져 있습니다.

해당 영역의 모든 버튼, 답글 버튼 포함 (단순화된 코드):

<button></button>

알림 버튼 (단순화된 코드):

<div class="topic-notifications-button">
  <button></button>
</div>

문제는 이 라인 때문에,

app/assets/stylesheets/mobile/topic-footer.scss

font-size: var(--font-up-1) 속성이 알림 버튼 래퍼 그리고 그 안의 버튼 모두에 적용된다는 것입니다.
알다시피 em 값은 부모에서 자식으로 이동할 때마다 누적되어 곱해집니다.

그 결과는 다음과 같이 설명할 수 있습니다:

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1.15 × 1.15가 문제입니다. 알림 버튼 <button> 요소의 최종 font-size 값이 예상보다 커집니다.

처음에는 눈에 잘 띄지 않습니다. 같은 라인^[1]에 있는 가장 높은 요소에 맞춰 높이를 조정하기 때문입니다. (렌치, 공유, 북마크 등) 즉, 이 컨테이너 안의 모든 버튼이 같은 높이를 가지므로 토픽 알림 버튼이 "너무 높다"고 두드러지지 않습니다.

위 GitHub 원박스에서 하이라이트된 라인을 제거하면 문제가 해결되어야 합니다:

---

1. 컨테이너에 몇 개의 추가 버튼을 넣어 콘텐츠가 줄바꿈되도록 하면 이를 보여줄 수 있습니다:
   

   
   
   
   첫 번째 줄의 버튼들은 모두 예상된 높이를 갖습니다.
   
   그러나 em 곱셈으로 인해 예상보다 큰 알림 버튼은 같은 라인에 있는 인접 버튼의 높이를 자동으로 증가시킵니다. ↩︎

[sam (Sam Saffron)]

디버깅해 주셔서 정말 감사합니다. 디자이너에게 전달할게요

[chapoi]

알림 버튼이 문제를 일으키고 있다는 건 알았지만, 아직 정확히 원인을 파악하지 못했거든요. 정말 잘 찾았네요! 거기에 이중으로 em이 적용되고 있다는 건 좀 놓치고 있었어요. 아직 확인은 못 했지만, 아마도 그런 것 같습니다.

감사합니다!

[chapoi]

이 문제는 수정되어야 합니다 (PR)

[Moin]

Share your feedback about the 🆕 iOS Discourse Hub app 같은 고정된 토픽에서는 답글 버튼이 여전히 작습니다

[Canapin (Coin-coin le Canapin)]

선택 키트에서 svg 아이콘 옆에 있는 보이지 않는 텍스트 ​는 버튼의 높이를 증가시킵니다. 어떤 버튼이든 텍스트가 있으면 높이가 비슷하게 증가하며(위에서 논의한 동작과 같이) 형제 버튼들도 그에 따라 높이를 조정합니다.

[chapoi]

네, 그건 내부적으로 별도 주제를 만들어서 다뤄야 할 것 같아요. ​가 문제를 일으키는 게 제 변경 사항 때문인지, 아니면 원래부터 그런 거였는데 이 환경에서 이제야 발견한 건지 아직 확신은 없어요.