Limit the width of unsupported multichar emojis

This commit is contained in:
Tusooa Zhu 2022-04-29 22:40:06 -04:00
parent e01c76c7e9
commit 0fd0d6c4c2
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 11 additions and 4 deletions

View File

@ -198,18 +198,22 @@ $emoji-picker-emoji-size: 32px;
height: $emoji-picker-emoji-size; height: $emoji-picker-emoji-size;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
font-size: $emoji-picker-emoji-size; line-height: $emoji-picker-emoji-size;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 4px; margin: 4px;
cursor: pointer; cursor: pointer;
img { .emoji-picker-emoji.-custom {
object-fit: contain; object-fit: contain;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
.emoji-picker-emoji.-unicode {
font-size: 24px;
overflow: hidden;
}
} }
} }

View File

@ -92,10 +92,13 @@
class="emoji-item" class="emoji-item"
@click.stop.prevent="onEmoji(emoji)" @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 <still-image
v-else v-else
class="emoji-picker-emoji" class="emoji-picker-emoji -custom"
:ref="setEmojiRef(group.id + emoji.displayText)" :ref="setEmojiRef(group.id + emoji.displayText)"
:data-src="emoji.imageUrl" :data-src="emoji.imageUrl"
:data-emoji-name="group.id + emoji.displayText" :data-emoji-name="group.id + emoji.displayText"