Support non-rectangular custom emojis 😩

Platforms like Misskey have irregularly-shaped custom emojis (emojos?)

- So far this handles horizontally-wide emojis, not tall ones (haven't seen any)
- text-overflow: ellipsis is not used because it can't ellipsis-fy wide emoji images

src/components/compose.jsx

@@ -1893,14 +1893,23 @@ function CustomEmojisModal({
                           }}
                           title={`:${emoji.shortcode}:`}
                         >
-                          <img
+                          <picture>
-                            src={emoji.url || emoji.staticUrl}
+                            {!!emoji.staticUrl && (
-                            alt={emoji.shortcode}
+                              <source
-                            width="16"
+                                srcset={emoji.staticUrl}
-                            height="16"
+                                media="(prefers-reduced-motion: reduce)"
-                            loading="lazy"
+                              />
-                            decoding="async"
+                            )}
-                          />
+                            <img
+                              class="shortcode-emoji"
+                              src={emoji.url || emoji.staticUrl}
+                              alt={emoji.shortcode}
+                              width="16"
+                              height="16"
+                              loading="lazy"
+                              decoding="async"
+                            />
+                          </picture>
                         </button>
                       ))}
                     </section>

src/components/emoji-text.jsx

@@ -18,8 +18,8 @@ function EmojiText({ text, emojis }) {
             src={url}
             alt={word}
             class="shortcode-emoji emoji"
-            width="12"
+            width="16"
-            height="12"
+            height="16"
             loading="lazy"
             decoding="async"
           />

src/components/status.css

@@ -283,8 +283,8 @@
 
 .status > .container > .meta {
   display: flex;
-  gap: 8px;
+  gap: 4px;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   white-space: nowrap;
 }
 .status.small > .container > .meta {
@@ -293,7 +293,11 @@
 .status > .container > .meta > * {
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
+  /* text-overflow: ellipsis; */
+}
+.status > .container > .meta .name-text {
+  mask-image: linear-gradient(to left, transparent, black 16px);
+  flex-grow: 1;
 }
 .status.large > .container > .meta {
   min-height: 50px;
@@ -1473,10 +1477,13 @@ a.card:is(:hover, :focus):visited {
 }
 
 .shortcode-emoji {
-  width: 1.2em;
+  width: auto;
+  min-width: 1.2em;
+  max-width: 100%;
   height: 1.2em;
   vertical-align: text-bottom;
-  object-fit: scale-down;
+  object-fit: cover;
+  object-position: left;
 }
 
 /* EDIT HISTORY */

src/utils/emojify-text.js

@@ -8,7 +8,7 @@ function emojifyText(text, emojis = []) {
     const { shortcode, staticUrl, url } = emoji;
     text = text.replace(
       new RegExp(`:${shortcode}:`, 'g'),
-      `<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" /></picture>`,
+      `<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="16" height="16" loading="lazy" decoding="async" /></picture>`,
     );
   });
   // console.log(text, emojis);