From 8eaccb31c2eea37f174c461b8b73a61dfc1c587d Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 2 May 2024 17:28:31 -1000
Subject: [PATCH] fix: :lipstick: Make sure avatars never shrink in flex
 containers

---
 components/social-elements/notes/header.vue        | 6 +++---
 components/social-elements/notes/note.vue          | 2 +-
 components/social-elements/notifications/notif.vue | 3 ++-
 components/social-elements/users/Account.vue       | 2 +-
 components/social-elements/users/SmallCard.vue     | 2 +-
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index f190322..b2081f6 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="small" class="flex flex-row">
         <Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
-            <NuxtLink :href="accountUrl">
+            <NuxtLink :href="accountUrl" class="shrink-0">
                 <img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
                     :alt="`${note?.account.acct}'s avatar`" />
             </NuxtLink>
@@ -24,7 +24,7 @@
     </div>
     <div v-else class="flex flex-row">
         <Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
-            <NuxtLink :href="accountUrl">
+            <NuxtLink :href="accountUrl" class="shrink-0">
                 <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
                     :alt="`${note?.account.acct}'s avatar`" />
             </NuxtLink>
@@ -46,7 +46,7 @@
             <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
                 <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
                     @{{
-                    note?.account.acct
+        note?.account.acct
                     }}
                 </Skeleton>
             </span>
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index d5e1f8e..f05c4cf 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -8,7 +8,7 @@
             <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
                 <Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
                 <img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
-                    class="h-6 w-6 rounded ring-1 ring-white/10" />
+                    class="h-6 w-6 rounded shrink-0 ring-1 ring-white/10" />
                 <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
             </Skeleton>
         </div>
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index 49e7a12..8fcceda 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -5,7 +5,8 @@
                 width-unit="%">
                 <Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
                 <img v-if="notification?.account?.avatar" :src="notification?.account.avatar"
-                    :alt="`${notification?.account.acct}'s avatar'`" class="h-6 w-6 rounded ring-1 ring-white/10" />
+                    :alt="`${notification?.account.acct}'s avatar'`"
+                    class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
                 <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text
                     }}</span>
             </Skeleton>
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index cb4699d..7f6dbab 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -9,7 +9,7 @@
             </Skeleton>
 
             <div class="flex items-start justify-between px-4 py-3">
-                <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded overflow-hidden">
+                <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden">
                     <Skeleton :enabled="skeleton" class="!h-full !w-full">
                         <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar"
                             :alt="`${account?.acct}'s avatar'`" />
diff --git a/components/social-elements/users/SmallCard.vue b/components/social-elements/users/SmallCard.vue
index 8cd3724..0cff66f 100644
--- a/components/social-elements/users/SmallCard.vue
+++ b/components/social-elements/users/SmallCard.vue
@@ -1,7 +1,7 @@
 <template>
     <NuxtLink :href="accountUrl" class="flex flex-row">
         <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
-            <div>
+            <div class="shrink-0">
                 <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
                     :alt="`${account?.acct}'s avatar'`" />
             </div>