better picker layout

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 {

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"