enhance(frontend): ユーザー名、名前、インスタンス名が長い場合はスクロールして見ることができる

CHANGELOG_CHERRYPICK.md

@@ -36,6 +36,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
   - 일정 시간이 경과하면 이미지 재생을 중지
 - Feat: 미디어가 포함된 모든 노트를 접을 수 있음
 - Feat: 클라이언트 업데이트가 있으면 알림
+- Enhance: 유저명, 이름, 인스턴스 이름이 길면 스크롤해서 볼 수 있음
 - Fix: 로그인하지 않은 상태에서 노트 상세 페이지의 노트 작성 폼을 조작할 수 있음
 - Fix: Chromium 기반 브라우저에서 노트 작성 폼의 스크롤 영역이 잘못된 디자인을 표시함
 

packages/frontend/src/components/MkInstanceTicker.vue

@@ -77,6 +77,19 @@ $height: 2ex;
 	font-size: 0.9em;
 	font-weight: bold;
 	white-space: nowrap;
-	overflow: visible;
+	overflow: scroll;
+  overflow-wrap: anywhere;
+  max-width: 300px;
+  text-overflow: ellipsis;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@container (max-width: 500px) {
+  .name {
+    max-width: 100px;
+  }
 }
 </style>

packages/frontend/src/components/MkNote.vue

@@ -188,7 +188,6 @@ import MkCwButton from '@/components/MkCwButton.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkEvent from '@/components/MkEvent.vue';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { focusPrev, focusNext } from '@/scripts/focus.js';

packages/frontend/src/components/MkNoteDetailed.vue

@@ -51,12 +51,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/>
 	<article :class="$style.note" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
-			<div style="display: flex; align-items: center;">
       <MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
+			<div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;">
 				<div :class="$style.noteHeaderBody">
-					<div>
+					<div :class="$style.noteHeaderName">
 						<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
-							<MkUserName :nowrap="false" :user="appearNote.user"/>
+							<MkUserName :nowrap="true" :user="appearNote.user"/>
 						</MkA>
 						<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
 						<span v-if="appearNote.user.badgeRoles" :class="$style.badgeRoles">
@@ -829,12 +829,21 @@ onMounted(() => {
 	justify-content: center;
 	padding-left: 16px;
 	font-size: 0.95em;
+  max-width: 300px;
 }
 
 .noteHeaderName {
 	font-weight: bold;
 	line-height: 1.3;
 	margin: 0 .5em 0 0;
+  overflow: scroll;
+  overflow-wrap: anywhere;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
 	&:hover {
 		color: var(--nameHover);
@@ -861,6 +870,14 @@ onMounted(() => {
 	margin-bottom: 2px;
 	line-height: 1.3;
 	word-wrap: anywhere;
+  overflow: scroll;
+  overflow-wrap: anywhere;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .noteContent {
@@ -1012,6 +1029,10 @@ onMounted(() => {
 	.root {
 		font-size: 0.9em;
 	}
+
+  .noteHeaderBody {
+    max-width: 180px;
+  }
 }
 
 @container (max-width: 480px) {

packages/frontend/src/components/MkNoteHeader.vue

@@ -87,13 +87,18 @@ 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;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
 	&:hover {
 		color: var(--nameHover);
 		text-decoration: none;
@@ -113,9 +118,14 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 .username {
 	flex-shrink: 9999999;
 	margin: 0 .5em 0 0;
-	overflow: hidden;
+	overflow: scroll;
 	text-overflow: ellipsis;
 	font-size: .95em;
+  max-width: 300px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .info {
@@ -150,7 +160,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 }
 
 @container (max-width: 500px) {
-	.name {
+	.name, .username {
 		max-width: 200px;
 	}
 }