make emoji picker more scalable

src/components/emoji_picker/emoji_picker.js

@@ -106,6 +106,9 @@ const EmojiPicker = {
     }
   },
   inject: ['popoversZLayer'],
+  mounted () {
+    this.updateEmojiSize()
+  },
   data () {
     return {
       keyword: '',
@@ -120,6 +123,7 @@ const EmojiPicker = {
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
+      emojiSize: 0,
       width: 0
     }
   },
@@ -130,6 +134,23 @@ const EmojiPicker = {
     Popover
   },
   methods: {
+    updateEmojiSize () {
+      const css = window.getComputedStyle(this.$refs.popover.$el)
+      const emojiSize = css.getPropertyValue('--emojiSize')
+      const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+      let emojiSizeReal
+      if (emojiSizeUnit.endsWith('em')) {
+        emojiSizeReal = emojiSizeValue * fontSize
+      } else {
+        emojiSizeReal = emojiSizeValue
+      }
+
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+      this.emojiSize = fullEmojiSize
+    },
     showPicker () {
       this.$refs.popover.showPopover()
       this.onShowing()
@@ -268,14 +289,25 @@ const EmojiPicker = {
     minItemSize () {
       return this.emojiHeight
     },
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
+    },
     emojiHeight () {
-      return 32 + 4
+      return this.emojiSize
     },
     emojiWidth () {
-      return 32 + 4
+      return this.emojiSize
     },
     itemPerRow () {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+      console.log(
+        this.emojiWidth,
+        this.width
+      )
+      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup