fix: placeholder for broken image urls and avoid overlowing emoji alt text (#327)

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>

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;