From 879f0d86484ff2dc211ff183f9badbdfa1ca5057 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Fri, 9 Aug 2024 15:00:19 +0900
Subject: [PATCH] feat(ui): overlap multiple account icons in notification
 (#2869)

---
 components/notification/NotificationGroupedLikes.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
index 045794ef8..a3855150b 100644
--- a/components/notification/NotificationGroupedLikes.vue
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -27,16 +27,16 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
             {{ $t('notification.reblogged_post') }}
           </div>
         </div>
-        <div v-if="likes.length" flex="~ gap-1">
+        <div v-if="likes.length" flex="~ gap-1 wrap">
           <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
           <template v-for="i, idx of likes" :key="idx">
-            <AccountHoverWrapper :account="i.account">
+            <AccountHoverWrapper :account="i.account" relative me--4 border="2 bg-base" rounded-full hover:z-1 focus-within:z-1>
               <NuxtLink :to="getAccountRoute(i.account)">
                 <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
               </NuxtLink>
             </AccountHoverWrapper>
           </template>
-          <div ms1>
+          <div ms-4>
             {{ $t('notification.favourited_post') }}
           </div>
         </div>