fix: ノートヘッダーでユーザー名が長すぎる場合、デザインに問題が発生する可能性がある

CHANGELOG_CHERRYPICK.md

@@ -66,6 +66,7 @@
 - Fix: iOS 기기에서 채팅 입력란이 채팅을 가리는 문제
 - Fix: 특정 MFM 구문이 포함된 노트 간략화 옵션 비활성화 시, MFM 구문에 대해서는 더 보기 버튼을 표시하지 않도록
 - Fix: 프로필 아이콘을 사각형으로 설정했을 때 유저 팝업의 디자인 개선
+- Fix: 노트 헤더에서 유저 이름이 너무 긴 경우 디자인에 문제가 발생할 수 있음
 
 ### Server
 - mfm-js를 cherrypick-mfm-js로 변경

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;
+	}
+}
 </style>