diff options
| author | Tusooa Zhu <tusooa@kazv.moe> | 2022-04-29 22:40:06 -0400 |
|---|---|---|
| committer | Tusooa Zhu <tusooa@kazv.moe> | 2022-09-18 13:19:54 -0400 |
| commit | 0fd0d6c4c2c7791f889135727f8afef10a36472d (patch) | |
| tree | c6dd4197911975246fc18217f0e69084d0a67792 /src/components/emoji_picker | |
| parent | e01c76c7e90f354436e726456532f51288a7ab99 (diff) | |
Limit the width of unsupported multichar emojis
Diffstat (limited to 'src/components/emoji_picker')
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.scss | 8 | ||||
| -rw-r--r-- | 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 index 222749d0..af01b3ec 100644 --- 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 index a6a63411..e5a5958c 100644 --- 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" |