From 9793da29734c22edb3cc27fece6e7979e9125ff3 Mon Sep 17 00:00:00 2001 From: NoriDev Date: Wed, 14 Jun 2023 20:20:41 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=8E=E3=83=BC=E3=83=88=E3=83=98?= =?UTF-8?q?=E3=83=83=E3=83=80=E3=83=BC=E3=81=A7=E3=83=A6=E3=83=BC=E3=82=B6?= =?UTF-8?q?=E3=83=BC=E5=90=8D=E3=81=8C=E9=95=B7=E3=81=99=E3=81=8E=E3=82=8B?= =?UTF-8?q?=E5=A0=B4=E5=90=88=E3=80=81=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?= =?UTF-8?q?=E3=81=AB=E5=95=8F=E9=A1=8C=E3=81=8C=E7=99=BA=E7=94=9F=E3=81=99?= =?UTF-8?q?=E3=82=8B=E5=8F=AF=E8=83=BD=E6=80=A7=E3=81=8C=E3=81=82=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG_CHERRYPICK.md | 1 + packages/frontend/src/components/MkNoteHeader.vue | 15 +++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md index b5b3ab7212..15676b8271 100644 --- a/CHANGELOG_CHERRYPICK.md +++ b/CHANGELOG_CHERRYPICK.md @@ -66,6 +66,7 @@ - Fix: iOS 기기에서 채팅 입력란이 채팅을 가리는 문제 - Fix: 특정 MFM 구문이 포함된 노트 간략화 옵션 비활성화 시, MFM 구문에 대해서는 더 보기 버튼을 표시하지 않도록 - Fix: 프로필 아이콘을 사각형으로 설정했을 때 유저 팝업의 디자인 개선 +- Fix: 노트 헤더에서 유저 이름이 너무 긴 경우 디자인에 문제가 발생할 수 있음 ### Server - mfm-js를 cherrypick-mfm-js로 변경 diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index f0077a9264..41edda5ee0 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -61,11 +61,6 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS white-space: nowrap; flex-direction: column; - &:first-child { - overflow: scroll; - overflow-wrap: anywhere; - } - &:last-child { align-items: flex-end; margin-left: auto; @@ -77,11 +72,13 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS display: block; margin: 0 .5em 0 0; padding: 0; - overflow: hidden; + overflow: scroll; + overflow-wrap: anywhere; font-size: 1em; font-weight: bold; text-decoration: none; text-overflow: ellipsis; + max-width: 300px; &:hover { color: var(--nameHover); @@ -133,4 +130,10 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS margin-left: 0.2em; } } + +@container (max-width: 500px) { + .name { + max-width: 200px; + } +}