chore(client): tweak style

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;
 		}

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);
 		}