From 7783c1e0e1062e2aed01ff8719b2b26aeacb303d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 24 Oct 2021 13:54:31 +0900
Subject: [PATCH] :art:

---
 .../components/reactions-viewer.details.vue   | 54 ++++++++++++-------
 .../components/reactions-viewer.reaction.vue  |  2 +-
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/client/components/reactions-viewer.details.vue b/src/client/components/reactions-viewer.details.vue
index 6e7da58e2..7c49bd1d9 100644
--- a/src/client/components/reactions-viewer.details.vue
+++ b/src/client/components/reactions-viewer.details.vue
@@ -1,23 +1,25 @@
 <template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')">
+<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
 	<div class="bqxuuuey">
-		<div class="info">
-			<div>{{ reaction.replace('@.', '') }}</div>
+		<div class="reaction">
 			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+			<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;"/>
+					<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;"/>
+					<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
+				</b>
+				<span slot="omitted">+{{ count - 10 }}</span>
+			</template>
 		</div>
-		<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;"/>
-				<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;"/>
-				<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
-			</b>
-			<span slot="omitted">+{{ count - 10 }}</span>
-		</template>
 	</div>
 </MkTooltip>
 </template>
@@ -59,8 +61,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .bqxuuuey {
-	> .info {
-		padding: 0 0 8px 0;
+	display: flex;
+
+	> .reaction {
+		flex: 1;
+		max-width: 100px;
 		text-align: center;
 
 		> .icon {
@@ -68,6 +73,19 @@ export default defineComponent({
 			width: 60px;
 			margin: 0 auto;
 		}
+
+		> .name {
+			font-size: 0.9em;
+		}
+	}
+
+	> .users {
+		flex: 1;
+		min-width: 0;
+		font-size: 0.9em;
+		border-left: solid 0.5px var(--divider);
+		padding-left: 10px;
+    margin-left: 10px;
 	}
 }
 </style>
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 0e09ab755..f47ba83f6 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -177,7 +177,7 @@ export default defineComponent({
 	> span {
 		font-size: 0.9em;
 		line-height: 32px;
-		margin: 0 0 0 8px;
+		margin: 0 0 0 4px;
 	}
 }
 </style>