Scroll active tab header into view in emoji picker

src/components/emoji_picker/emoji_picker.js

@@ -87,8 +87,26 @@ const EmojiPicker = {
             this.activeGroup = group.id
           }
         })
+        this.scrollHeader()
       })
     },
+    scrollHeader () {
+      // Scroll the active tab's header into view
+      const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+      const left = headerRef.offsetLeft
+      const right = left + headerRef.offsetWidth
+      const headerCont = this.$refs.header
+      const currentScroll = headerCont.scrollLeft
+      const currentScrollRight = currentScroll + headerCont.clientWidth
+      const setScroll = s => { headerCont.scrollLeft = s }
+
+      const margin = 7 // .emoji-tabs-item: padding
+      if (left - margin < currentScroll) {
+        setScroll(left - margin)
+      } else if (right + margin > currentScrollRight) {
+        setScroll(right + margin - headerCont.clientWidth)
+      }
+    },
     highlight (key) {
       const ref = this.$refs['group-' + key]
       const top = ref.offsetTop

src/components/emoji_picker/emoji_picker.vue

@@ -3,9 +3,13 @@
     class="emoji-picker panel panel-default panel-body"
   >
     <div class="heading">
-      <span class="emoji-tabs">
+      <span
+        ref="header"
+        class="emoji-tabs"
+      >
         <span
           v-for="group in filteredEmojiGroups"
+          :ref="'group-header-' + group.id"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{