From ab4ceae1e3d8ed6daba275c709577addb4c07c8e Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Wed, 28 Dec 2022 22:14:29 +0100
Subject: [PATCH] fix: avatar glitches in some OS/browsers

---
 components/account/AccountBigAvatar.vue | 16 ++++++++++++++++
 components/account/AccountInfo.vue      |  2 +-
 components/publish/PublishWidget.vue    |  2 +-
 components/status/StatusCard.vue        |  2 +-
 unocss.config.ts                        |  3 ---
 5 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 components/account/AccountBigAvatar.vue

diff --git a/components/account/AccountBigAvatar.vue b/components/account/AccountBigAvatar.vue
new file mode 100644
index 00000000..ecc0b3b0
--- /dev/null
+++ b/components/account/AccountBigAvatar.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+// Avatar with a background base achieving a 3px border to be used in status cards
+// The border is used for Avatar on Avatar for reblogs and connecting replies
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div :key="account.avatar" v-bind="$attrs" rounded-full bg-base w-54px h-54px flex items-center justify-center>
+    <AccountAvatar :account="account" w-48px h-48px />
+  </div>
+</template>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index c8375836..4e8a7f42 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -17,7 +17,7 @@ defineOptions({
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0>
-      <AccountAvatar :account="account" account-avatar-normal />
+      <AccountBigAvatar :account="account" />
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden justify-center leading-none>
       <div flex="~" gap-2>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index d736c57d..d132fede 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -188,7 +188,7 @@ defineExpose({
 
     <div flex gap-3 flex-1>
       <NuxtLink :to="getAccountRoute(currentUser.account)">
-        <AccountAvatar :account="currentUser.account" account-avatar-normal />
+        <AccountBigAvatar :account="currentUser.account" />
       </NuxtLink>
       <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
       <div
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 40ff3312..8b936098 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -109,7 +109,7 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
         </template>
         <AccountHoverWrapper :account="status.account">
           <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
-            <AccountAvatar :account="status.account" account-avatar-normal :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" />
+            <AccountBigAvatar :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" />
           </NuxtLink>
         </AccountHoverWrapper>
         <div v-if="connectReply" w-full h-full flex justify-center>
diff --git a/unocss.config.ts b/unocss.config.ts
index db0ad0f4..0ee92d8c 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -55,9 +55,6 @@ export default defineConfig({
       'flex-v-center': 'items-center',
       'flex-h-center': 'justify-center',
       'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
-
-      // account
-      'account-avatar-normal': 'w-54px h-54px border-3 border-bg-base',
     },
   ],
   presets: [