make header scrollable Y->X

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')

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"