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