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] 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"