From 8c1a623e73b6acd9ac6163bfc98a0480d55b13f3 Mon Sep 17 00:00:00 2001
From: fly_mc <me@flymc.cc>
Date: Wed, 2 Oct 2024 20:38:12 +0800
Subject: [PATCH] tweak: split name and username

---
 .../src/components/MkInstanceTicker.vue       |  1 +
 .../src/components/MkNoteDetailed.vue         |  5 +-
 .../frontend/src/components/MkNoteHeader.vue  | 54 +++++++++++++------
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index fae22baa3f..5a2a36a91f 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -49,6 +49,7 @@ $height: 2ex;
 	border-radius: 4px 0 0 4px;
 	overflow: clip;
 	color: #fff;
+	margin: -.3em 0 0 0;
 	text-shadow: /* .866 ≈ sin(60deg) */
 		1px 0 1px #000,
 		.866px .5px 1px #000,
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index bdb800b32a..f145532bae 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -661,6 +661,7 @@ function loadConversation() {
 }
 
 .noteHeaderName {
+	margin: 0 0 -.2em 0;
 	font-weight: bold;
 	line-height: 1.3;
 }
@@ -680,7 +681,7 @@ function loadConversation() {
 }
 
 .noteHeaderUsername {
-	margin-bottom: 2px;
+	margin: 0 0 .5em 0;
 	line-height: 1.3;
 	word-wrap: anywhere;
 }
@@ -744,7 +745,7 @@ function loadConversation() {
 
 .noteFooterButton {
 	margin: 0;
-	padding: 8px;
+	padding: 6px;
 	opacity: 0.7;
 
 	&:not(:last-child) {
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index cf689d1fee..6a9197cd48 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -5,20 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <header :class="$style.root">
-	<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.7" style="min-width: 0;">
-		<div style="display: flex; white-space: nowrap; align-items: baseline;">
-			<div v-if="mock" :class="$style.name">
-				<MkUserName :user="note.user"/>
+	<div :class="$style.section">
+		<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.7" style="min-width: 0;">
+			<div style="display: flex;">
+				<div v-if="mock" :class="$style.name">
+					<MkUserName :user="note.user"/>
+				</div>
+				<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
+					<MkUserName :user="note.user"/>
+				</MkA>
+				<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
+				<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
+					<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
+				</div>
 			</div>
-			<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
-				<MkUserName :user="note.user"/>
-			</MkA>
-			<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
-			<div :class="$style.username"><MkAcct :user="note.user"/></div>
-		</div>
-	</component>
-	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
-		<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
+		   	<div :class="$style.username"><MkAcct :user="note.user"/></div>
+		</component>
 	</div>
 	<div :class="$style.info">
 		<div v-if="mock">
@@ -60,10 +62,26 @@ const mock = inject<boolean>('mock', false);
 	white-space: nowrap;
 }
 
+.section {
+		align-items: flex-start;
+		white-space: nowrap;
+		flex-direction: column;
+		overflow: hidden;
+
+		&:last-child {
+			display: flex;
+			align-items: flex-end;
+			margin-left: auto;
+			margin-bottom: auto;
+			padding-left: 10px;
+			overflow: clip;
+		}
+}
+
 .name {
 	flex-shrink: 1;
 	display: block;
-	margin: 0 .5em 0 0;
+	margin: .5em .5em 0 0;
 	padding: 0;
 	overflow: hidden;
 	font-size: 1em;
@@ -88,9 +106,15 @@ const mock = inject<boolean>('mock', false);
 
 .username {
 	flex-shrink: 9999999;
-	margin: 0 .5em 0 0;
+	margin: -.3em .5em .3em 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	font-size: 95%;
+	opacity: 0.8;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
 }
 
 .info {