changelog.d/emoji-picker.add

@@ -1 +0,0 @@
-fixed occasional overflows in emoji picker and made header scrollable

src/components/emoji_picker/emoji_picker.scss

@@ -49,7 +49,6 @@
 
   .heading {
     display: flex;
-    flex-direction: column;
     padding: 0.7em 0.5em 0;
   }
 
@@ -130,7 +129,7 @@
 
   .emoji {
     &-search {
-      padding-bottom: 0.5em;
+      padding: 0.3em;
       flex: 0 0 auto;
 
       input {
@@ -197,9 +196,9 @@
     &-group {
       display: grid;
       grid-template-columns: repeat(var(--__amount), 1fr);
-      align-items: center;
       justify-items: center;
-      justify-content: center;
+      align-items: center;
+      justify-content: left;
       grid-template-rows: repeat(1, auto);
 
       &.first-row {

src/components/emoji_picker/emoji_picker.vue

@@ -11,16 +11,6 @@
       <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.
@@ -85,6 +75,16 @@
           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"