Use negative z-index to position decorations behind the avatar

Co-authored-by: dakkar <dakkar@thenautilus.net>

1 files changed, 16 insertions, 15 deletions

diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index e9df7083e3..4a01d3f32d 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -7,20 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
 	<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
-	<template v-if="showDecoration">
-		<img
-			v-for="decoration in decorations ?? user.avatarDecorations"
-			:class="[$style.decoration]"
-			:src="getDecorationUrl(decoration)"
-			:style="{
-				rotate: getDecorationAngle(decoration),
-				scale: getDecorationScale(decoration),
-				translate: getDecorationOffset(decoration),
-				zIndex: getDecorationZIndex(decoration),
-			}"
-			alt=""
-		>
-	</template>
 	<div v-if="user.isCat" :class="[$style.ears]">
 		<div :class="$style.earLeft">
 			<div v-if="false" :class="$style.layer">
@@ -37,6 +23,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
+	<template v-if="showDecoration">
+		<img
+			v-for="decoration in decorations ?? user.avatarDecorations"
+			:class="[$style.decoration]"
+			:src="getDecorationUrl(decoration)"
+			:style="{
+				rotate: getDecorationAngle(decoration),
+				scale: getDecorationScale(decoration),
+				translate: getDecorationOffset(decoration),
+				zIndex: getDecorationZIndex(decoration),
+			}"
+			alt=""
+		>
+	</template>
 </component>
 </template>
 
@@ -115,7 +115,7 @@ function getDecorationOffset(decoration: Omit<Misskey.entities.UserDetailed['ava
 }
 
 function getDecorationZIndex(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
-	return decoration.showBelow ? '0' : undefined;
+	return decoration.showBelow ? '-1' : undefined;
 }
 
 const color = ref<string | undefined>();
@@ -164,6 +164,7 @@ watch(() => props.user.avatarBlurhash, () => {
 	flex-shrink: 0;
 	border-radius: 100%; // sharkey: controlled by square avatars setting!
 	line-height: 16px;
+	z-index: 0; // sharkey: starts stacking context to help with showing decorations behind the avatar
 }
 
 .inner {