pleroma-fe

commit: 0fd0d6c4c2c7791f889135727f8afef10a36472d
parent e01c76c7e90f354436e726456532f51288a7ab99
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Fri, 29 Apr 2022 22:40:06 -0400

Limit the width of unsupported multichar emojis

Diffstat:
M
src/components/emoji_picker/emoji_picker.scss
8
++++++--
M
src/components/emoji_picker/emoji_picker.vue
7
+++++--

2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
@@ -198,18 +198,22 @@ $emoji-picker-emoji-size: 32px;
       height: $emoji-picker-emoji-size;
       box-sizing: border-box;
       display: flex;
-      font-size: $emoji-picker-emoji-size;
+      line-height: $emoji-picker-emoji-size;
       align-items: center;
       justify-content: center;
       margin: 4px;
 
       cursor: pointer;
 
-      img {
+      .emoji-picker-emoji.-custom {
         object-fit: contain;
         max-width: 100%;
         max-height: 100%;
       }
+      .emoji-picker-emoji.-unicode {
+        font-size: 24px;
+        overflow: hidden;
+      }
     }
 
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
@@ -92,10 +92,13 @@
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
             >
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              <span
+                v-if="!emoji.imageUrl"
+                class="emoji-picker-emoji -unicode"
+              >{{ emoji.replacement }}</span>
               <still-image
                 v-else
-                class="emoji-picker-emoji"
+                class="emoji-picker-emoji -custom"
                 :ref="setEmojiRef(group.id + emoji.displayText)"
                 :data-src="emoji.imageUrl"
                 :data-emoji-name="group.id + emoji.displayText"