From ed73a17da61ed8e3b3b94936eccbea97fc9679f5 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 13 Nov 2021 03:38:26 +0100
Subject: [PATCH] fix(client): reaction viewer layout (#7942)

The profile picture and name should be grouped together as they belong, and
it should be clear which picture belongs to which name.
---
 packages/client/src/components/reactions-viewer.details.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue
index 7c49bd1d9..d80f9b9e8 100644
--- a/packages/client/src/components/reactions-viewer.details.vue
+++ b/packages/client/src/components/reactions-viewer.details.vue
@@ -9,12 +9,14 @@
 			<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>
@@ -64,7 +66,6 @@ export default defineComponent({
 	display: flex;
 
 	> .reaction {
-		flex: 1;
 		max-width: 100px;
 		text-align: center;
 
@@ -80,12 +81,13 @@ 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-left: 10px;
 	}
 }
 </style>