tweak: split name and username

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,

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) {

packages/frontend/src/components/MkNoteHeader.vue

@@ -5,8 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <header :class="$style.root">
+	<div :class="$style.section">
 		<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 style="display: flex;">
 				<div v-if="mock" :class="$style.name">
 					<MkUserName :user="note.user"/>
 				</div>
@@ -14,12 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<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>
+			</div>
+		   	<div :class="$style.username"><MkAcct :user="note.user"/></div>
+		</component>
+	</div>
 	<div :class="$style.info">
 		<div v-if="mock">
 			<MkTime :time="note.createdAt" colored/>
@@ -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 {