From 9b7d30151fc9cff968f7c245d3e8aec7afa870c8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Dec 2024 11:56:00 +0200
Subject: [PATCH] update itemsPerRow calculation

---
 src/components/emoji_picker/emoji_picker.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index df56bf33..9f415f79 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -140,19 +140,33 @@ const EmojiPicker = {
     },
     updateEmojiSize () {
       const css = window.getComputedStyle(this.$refs.popover.$el)
+      const fontSize = css.getPropertyValue('font-size')
       const emojiSize = css.getPropertyValue('--emojiSize')
+
+      const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '')
+      const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))
+
       const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
       const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
-      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+      let fontSizeMultiplier
+      if (fontSizeUnit.endsWith('em')) {
+        fontSizeMultiplier = fontSizeValue
+      } else {
+        fontSizeMultiplier = fontSizeValue / 14
+      }
+      console.log('Multiplier', fontSizeMultiplier)
+      console.log('Result', fontSizeMultiplier * 14)
 
       let emojiSizeReal
       if (emojiSizeUnit.endsWith('em')) {
-        emojiSizeReal = emojiSizeValue * fontSize
+        emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
       } else {
         emojiSizeReal = emojiSizeValue
       }
+      console.log(emojiSizeReal)
 
-      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSizeMultiplier * 14)
       this.emojiSize = fullEmojiSize
     },
     showPicker () {
@@ -307,6 +321,7 @@ const EmojiPicker = {
       return this.emojiSize
     },
     itemPerRow () {
+      console.log('CALC', this.emojiSize, this.width)
       return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {