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

@@ -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>