From 8f32b1ce22364f3c8707ca46a9d834cb8ab91810 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 4 Dec 2022 14:14:12 +0000
Subject: [PATCH] fix: placeholder for broken image urls and avoid overlowing
 emoji alt text (#327)

---
 components/account/AccountAvatar.vue | 4 +++-
 styles/global.css                    | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index f6310da9..50ba5a28 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -6,17 +6,19 @@ defineProps<{
 }>()
 
 const loaded = $ref(false)
+const error = $ref(false)
 </script>
 
 <template>
   <img
     :key="account.avatar"
-    :src="account.avatar"
+    :src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
     rounded-full
     :class="loaded ? 'bg-gray' : 'bg-gray:10'"
     v-bind="$attrs"
     @load="loaded = true"
+    @error="error = true"
   >
 </template>
diff --git a/styles/global.css b/styles/global.css
index b9cd5327..83b77f8d 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -43,6 +43,7 @@ body {
 
 .custom-emoji {
   display: inline-block;
+  overflow: hidden;
   max-height: 1.3em;
   max-width: 1.3em;
   vertical-align: text-bottom;