스마트폰에서 사용자 메뉴 항목이 여러 개 표시되지 않음

기여 버그
1

안녕하세요. 신규 사용자입니다. 이 메시지를 남기려고 접속했는데 중복 게시가 될 수 있으니 죄송합니다. (아직 이와 관련된 내용을 찾지는 못했습니다.)

Discourse 2.8.0에서는 사용자 메뉴에 문제가 있는 것 같습니다. 실제 스마트폰(375px x 667px 화면)이나 가상 환경(Firefox의 반응형 디자인 모드) 모두에서 발생합니다. 제가 확인한 바로는, div id=“quick-access-profile” ul 요소에 적용된 flex 스타일 때문에 작은 화면에서 일부 요소가 표시되지 않는 문제가 있습니다.

discuss.pixls.us에서 가져온 예시(이 사이트에서도 동일하게 나타남)를 실제 스마트폰으로 촬영한 결과입니다:

portrait
portrait292×500 17 KB

제가 파악한 바로는, flex 스타일이 첫 번째 열의 너비를 뷰포트와 거의 동일하게 강제하여, 세로 공간에 맞지 않는 요소들이 화면 밖(오른쪽으로)으로 밀려나고 있는 것 같습니다.

참고로 제 스마트폰에서는 세로 모드에서 로그아웃 버튼을 도달할 수 없었지만, Firefox의 반응형 디자인 모드에서는 그 반대였습니다. (가로 모드에서 로그아웃 버튼에 접근할 수 없었습니다.)

이 정보가 도움이 되기를 바랍니다.

2개의 좋아요
2

이것은 가로 화면 보기입니다 (신규 사용자라 한 게시물에 이미지를 2개 올릴 수 없어서):

landscape
landscape517×291 19 KB

4개의 좋아요
3

자세한 보고 감사합니다! 말씀하신 내용이 정확해 보입니다. 수정하겠습니다.

4개의 좋아요
5

여기서 수정되었습니다:

4개의 좋아요
6

감사합니다! :smile:

스마트폰에서는 이제 잘 동작하는 것 같습니다. 다만 이 부분은 잘 이해가 안 됩니다:

(github에서 가져옴)
브레이크포인트를 늘리고 패딩을 줄여 전체 커버리지를 확보합니다. 매우 작은 기기(아이폰 SE보다 더 작은 기기)에만 적용됩니다.

2세대 아이폰 SE(아이폰 8 기반)를 말씀하시는 것 같습니다. 하지만 제 아이폰 7은 동일한 해상도(뷰포트)를 가지고 있고, 이 기기에서도 수정이 적용된 것 같습니다. 따라서 이 수정은 아이폰 SE에도 적용되는 것 같습니다.

어쨌든 이제 해결되었습니다. 다시 한번 감사합니다.

1개의 좋아요