From 76019d1e0349ecf170d660b8324145677b1e472c Mon Sep 17 00:00:00 2001 From: tusooa Date: Fri, 6 Jan 2023 13:14:38 -0500 Subject: [PATCH 01/11] Fix emoji picker off-by-1 error --- src/components/emoji_picker/emoji_picker.js | 2 +- src/components/emoji_picker/emoji_picker.scss | 2 +- src/components/emoji_picker/emoji_picker.vue | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 4a447905e9..0d7ca8124a 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -244,7 +244,7 @@ const EmojiPicker = { if (!this.$refs['emoji-groups']) { return } - this.width = this.$refs['emoji-groups'].$el.offsetWidth + this.width = this.$refs['emoji-groups'].$el.clientWidth }) } }, diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index dda1219748..848d435a0f 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -7,7 +7,7 @@ $emoji-picker-emoji-size: 32px; .emoji-picker { width: 25em; - max-width: 100vw; + max-width: calc(100vw - 20px); // popover gives 10px margin from window edge display: flex; flex-direction: column; background-color: $fallback--bg; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 453ecdfc08..ca90bf265f 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -83,6 +83,7 @@ :emit-update="true" @update="onScroll" @visible="recalculateItemPerRow" + @resize="recalculateItemPerRow" >