Calculate display count from width

src/components/emoji_picker/emoji_picker.js

@@ -112,7 +112,8 @@ const EmojiPicker = {
       contentLoaded: false,
       groupRefs: {},
       emojiRefs: {},
-      filteredEmojiGroups: []
+      filteredEmojiGroups: [],
+      width: 0
     }
   },
   components: {
@@ -155,7 +156,6 @@ const EmojiPicker = {
       this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
     },
     onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
-      console.log('onScroll', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
       const target = this.$refs['emoji-groups'].$el
       this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
     },
@@ -221,6 +221,7 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.recalculateItemPerRow()
       this.$nextTick(() => {
         this.$refs.search.focus()
       })
@@ -241,6 +242,14 @@ const EmojiPicker = {
           emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
         }))
         .filter(group => group.emojis.length > 0)
+    },
+    recalculateItemPerRow () {
+      this.$nextTick(() => {
+        if (!this.$refs['emoji-groups']) {
+          return
+        }
+        this.width = this.$refs['emoji-groups'].$el.offsetWidth
+      })
     }
   },
   watch: {
@@ -252,6 +261,9 @@ const EmojiPicker = {
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
     }
   },
+  mounted () {
+    this.recalculateItemPerRow()
+  },
   computed: {
     minItemSize () {
       return this.emojiHeight
@@ -263,7 +275,7 @@ const EmojiPicker = {
       return 32 + 4
     },
     itemPerRow () {
-      return 6
+      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup

src/components/emoji_picker/emoji_picker.vue

@@ -82,6 +82,7 @@
             :items="emojiItems"
             :emit-update="true"
             @update="onScroll"
+            @visible="recalculateItemPerRow"
           >
             <template #default="{ item: group, index, active }">
               <DynamicScrollerItem