From e2bcbd51bb1c42f2c289de5daf993b2d6bb97205 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 23 Dec 2024 23:01:15 +0200
Subject: [PATCH 1/6] emoji consistency + picker improvements

---
 src/components/emoji_picker/emoji_picker.scss | 49 ++++++++++++-------
 src/components/emoji_picker/emoji_picker.vue  |  2 +
 .../emoji_reactions/emoji_reactions.js        |  4 +-
 .../emoji_reactions/emoji_reactions.vue       | 13 +++--
 4 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 12c09388..45290a89 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -166,24 +166,6 @@
       }
     }
 
-    &-group {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: left;
-
-      &-title {
-        font-size: 0.85em;
-        width: 100%;
-        margin: 0;
-        padding-left: 0.3em;
-
-        &.disabled {
-          display: none;
-        }
-      }
-    }
-
     &-item {
       width: var(--emoji-size);
       height: var(--emoji-size);
@@ -206,9 +188,38 @@
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: 1.6em;
+        font-size: calc(var(--emoji-size) * 0.8);
         overflow: hidden;
       }
     }
+
+    &-group {
+      display: grid;
+      grid-template-columns: repeat(var(--__amount), 1fr);
+      justify-items: center;
+      align-items: center;
+      justify-content: left;
+      grid-template-rows: repeat(1, auto);
+
+      &.first-row {
+        grid-template-rows: repeat(2, auto);
+
+        .emoji-item {
+          grid-row: 2;
+        }
+      }
+
+      &-title {
+        font-size: 0.85em;
+        grid-column: span var(--__amount);
+        width: 100%;
+        margin: 0;
+        padding-left: 0.3em;
+
+        &.disabled {
+          display: none;
+        }
+      }
+    }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a3dc8f9e..0079c369 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -106,6 +106,8 @@
               >
                 <div
                   class="emoji-group"
+                  :class="{ ['first-row']: group.isFirstRow }"
+                  :style="{ '--__amount': itemPerRow }"
                 >
                   <h6
                     v-if="group.isFirstRow"
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 4d5c6c5a..dd5577bd 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,5 +1,6 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
+import StillImage from 'src/components/still-image/still-image.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faPlus,
@@ -19,7 +20,8 @@ const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
     UserAvatar,
-    UserListPopover
+    UserListPopover,
+    StillImage
   },
   props: ['status'],
   data: () => ({
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 3ab4c125..4c768905 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -18,12 +18,11 @@
         <span
           class="reaction-emoji"
         >
-          <img
+          <StillImage
             v-if="reaction.url"
             :src="reaction.url"
             class="reaction-emoji-content"
-            width="1em"
-          >
+          />
           <span
             v-else
             class="reaction-emoji reaction-emoji-content"
@@ -132,12 +131,16 @@
     .reaction-emoji-content {
       max-width: 100%;
       max-height: 100%;
-      width: auto;
-      height: auto;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       line-height: inherit;
       overflow: hidden;
       font-size: calc(var(--emoji-size) * 0.8);
       margin: 0;
+
+      img {
+        object-fit: contain;
+      }
     }
 
     &:focus {

From 0bbdea0e90e11cb3d8cfd87e0bf9a440cf488cdc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 23 Dec 2024 23:15:35 +0200
Subject: [PATCH 2/6] make header scrollable Y->X

---
 src/components/emoji_picker/emoji_picker.js  | 3 +++
 src/components/emoji_picker/emoji_picker.vue | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index ae48139a..df56bf33 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -135,6 +135,9 @@ const EmojiPicker = {
     Popover
   },
   methods: {
+    groupScroll (e) {
+      e.currentTarget.scrollLeft += e.deltaY + e.deltaX
+    },
     updateEmojiSize () {
       const css = window.getComputedStyle(this.$refs.popover.$el)
       const emojiSize = css.getPropertyValue('--emojiSize')
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0079c369..bd94bf99 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -8,7 +8,9 @@
     @close="onPopoverClosed"
   >
     <template #content>
-      <div class="heading">
+      <div
+        class="heading"
+      >
         <!--
           Body scroll lock needs to be on every scrollable element on safari iOS.
           Here we tell it to enable scrolling for this element.
@@ -18,6 +20,7 @@
           ref="header"
           v-body-scroll-lock="isInModal"
           class="emoji-tabs"
+          @wheel.prevent="groupScroll"
         >
           <span
             v-for="group in filteredEmojiGroups"

From 1f7fa777b290d94da683f792d10797cef867ecd0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 23 Dec 2024 23:17:10 +0200
Subject: [PATCH 3/6] changelog

---
 changelog.d/emoji-picker.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/emoji-picker.add

diff --git a/changelog.d/emoji-picker.add b/changelog.d/emoji-picker.add
new file mode 100644
index 00000000..d0ddb18e
--- /dev/null
+++ b/changelog.d/emoji-picker.add
@@ -0,0 +1 @@
+fixed occasional overflows in emoji picker and made header scrollable

From 761ca72136009da6ed0094e3d201afff86bb91d5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Dec 2024 11:11:49 +0200
Subject: [PATCH 4/6] better picker layout

---
 src/components/emoji_picker/emoji_picker.scss |  7 ++++---
 src/components/emoji_picker/emoji_picker.vue  | 20 +++++++++----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 45290a89..0c9a6600 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -49,6 +49,7 @@
 
   .heading {
     display: flex;
+    flex-direction: column;
     padding: 0.7em 0.5em 0;
   }
 
@@ -129,7 +130,7 @@
 
   .emoji {
     &-search {
-      padding: 0.3em;
+      padding-bottom: 0.5em;
       flex: 0 0 auto;
 
       input {
@@ -196,9 +197,9 @@
     &-group {
       display: grid;
       grid-template-columns: repeat(var(--__amount), 1fr);
-      justify-items: center;
       align-items: center;
-      justify-content: left;
+      justify-items: center;
+      justify-content: center;
       grid-template-rows: repeat(1, auto);
 
       &.first-row {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index bd94bf99..2a2e260f 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -11,6 +11,16 @@
       <div
         class="heading"
       >
+        <div class="emoji-search">
+          <input
+            ref="search"
+            v-model="keyword"
+            type="text"
+            class="input form-control"
+            :placeholder="$t('emoji.search_emoji')"
+            @input="$event.target.composing = false"
+          >
+        </div>
         <!--
           Body scroll lock needs to be on every scrollable element on safari iOS.
           Here we tell it to enable scrolling for this element.
@@ -75,16 +85,6 @@
           class="emoji-content"
           :class="{hidden: showingStickers}"
         >
-          <div class="emoji-search">
-            <input
-              ref="search"
-              v-model="keyword"
-              type="text"
-              class="input form-control"
-              :placeholder="$t('emoji.search_emoji')"
-              @input="$event.target.composing = false"
-            >
-          </div>
           <!-- Enables scrolling for this element on safari iOS. See comments for header. -->
           <DynamicScroller
             ref="emoji-groups"

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 5/6] 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 () {

From 9068d90d4a013ad61ab5dcb2d86ce5370dc713f6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 26 Dec 2024 22:56:55 +0200
Subject: [PATCH 6/6] fix gif indicator on reaction emoji

---
 src/components/emoji_reactions/emoji_reactions.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 4c768905..75e02110 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -126,6 +126,8 @@
       display: flex;
       justify-content: center;
       align-items: center;
+
+      --_still_image-label-scale: 0.3;
     }
 
     .reaction-emoji-content {