2 files changed, 50 insertions, 28 deletions

diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue
index d80f9b9e8d..ecf1389691 100644
--- a/packages/client/src/components/reactions-viewer.details.vue
+++ b/packages/client/src/components/reactions-viewer.details.vue
@@ -6,21 +6,11 @@
 			<div class="name">{{ reaction.replace('@.', '') }}</div>
 		</div>
 		<div class="users">
-			<template v-if="users.length <= 10">
-				<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
-					<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
-					<br/>
-					<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
-				</b>
-			</template>
-			<template v-if="10 < users.length">
-				<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
-					<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
-					<br/>
-					<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
-				</b>
-				<span slot="omitted">+{{ count - 10 }}</span>
-			</template>
+			<div class="user" v-for="u in users" :key="u.id">
+				<MkAvatar class="avatar" :user="u"/>
+				<MkUserName class="name" :user="u" :nowrap="true"/>
+			</div>
+			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
 		</div>
 	</div>
 </MkTooltip>
@@ -81,13 +71,31 @@ export default defineComponent({
 	}
 
 	> .users {
-		display: flex;
 		flex: 1;
 		min-width: 0;
 		font-size: 0.9em;
 		border-left: solid 0.5px var(--divider);
 		padding-left: 10px;
 		margin-left: 10px;
+		margin-right: 14px;
+		text-align: left;
+
+		> .user {
+			line-height: 24px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			&:not(:last-child) {
+				margin-bottom: 3px;
+			}
+
+			> .avatar {
+				width: 24px;
+				height: 24px;
+				margin-right: 3px;
+			}
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/components/renote.details.vue b/packages/client/src/components/renote.details.vue
index 128d97d8de..ff9c4505a5 100644
--- a/packages/client/src/components/renote.details.vue
+++ b/packages/client/src/components/renote.details.vue
@@ -1,11 +1,11 @@
 <template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
-	<div class="renoteTooltip">
-		<b v-for="u in users" :key="u.id">
-			<MkAvatar :user="u" style="width: 24px; height: 24px;"/><br/>
-			<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
-		</b>
-		<span v-if="users.length < count" slot="omitted">+{{ count - users.length }}</span>
+<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="250">
+	<div class="beaffaef">
+		<div class="user" v-for="u in users" :key="u.id">
+			<MkAvatar class="avatar" :user="u"/>
+			<MkUserName class="name" :user="u" :nowrap="true"/>
+		</div>
+		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
 	</div>
 </MkTooltip>
 </template>
@@ -36,11 +36,25 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.renoteTooltip {
-	display: flex;
-	flex: 1;
-	min-width: 0;
+.beaffaef {
 	font-size: 0.9em;
-	gap: 12px;
+	text-align: left;
+
+	> .user {
+		line-height: 24px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:not(:last-child) {
+			margin-bottom: 3px;
+		}
+
+		> .avatar {
+			width: 24px;
+			height: 24px;
+			margin-right: 3px;
+		}
+	}
 }
 </style>