From dc1a35c13c9034c9cf160aa50368da76c7104e21 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 4 Jul 2022 01:12:36 +0900
Subject: [PATCH] chore(client): tweak style

---
 .../client/src/ui/_common_/statusbar-user-list.vue    | 11 +++++++++--
 packages/client/src/ui/_common_/statusbars.vue        |  7 ++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 01240dc6bc..2757e9118d 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -6,7 +6,7 @@
 				<span v-for="note in notes" :key="note.id" class="item">
 					<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
 					<MkA class="text" :to="notePage(note)">
-						<Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
+						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
 					</MkA>
 					<span class="divider"></span>
 				</span>
@@ -91,11 +91,18 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 			margin-right: 8px;
 		}
 
+		> .text {
+			> .text {
+				display: inline-block;
+				vertical-align: bottom;
+			}
+		}
+
 		> .divider {
 			display: inline-block;
 			width: 0.5px;
 			height: 16px;
-			margin: 0 1em;
+			margin: 0 2em;
 			background: currentColor;
 			opacity: 0;
 		}
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index 7b3a68ec45..c18771c54f 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -29,25 +29,30 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 <style lang="scss" scoped>
 .dlrsnxqu {
 	--height: 24px;
+	--nameMargin: 10px;
 	background: var(--panel);
 	font-size: 0.85em;
 
 	&.verySmall {
+		--nameMargin: 7px;
 		--height: 16px;
 		font-size: 0.75em;
 	}
 
 	&.small {
+		--nameMargin: 8px;
 		--height: 20px;
 		font-size: 0.8em;
 	}
 
 	&.large {
+		--nameMargin: 12px;
 		--height: 26px;
 		font-size: 0.875em;
 	}
 
 	&.veryLarge {
+		--nameMargin: 14px;
 		--height: 30px;
 		font-size: 0.9em;
 	}
@@ -62,7 +67,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 		contain: strict;
 
 		> .name {
-			padding: 0 6px;
+			padding: 0 var(--nameMargin);
 			font-weight: bold;
 			color: var(--accent);
 		}