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.
This commit is contained in:
		@@ -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>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user