From 914c78398469988f549930bd35d044082d155277 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztau.be>
Date: Sat, 7 Dec 2019 10:29:53 +0100
Subject: [PATCH 1/4] fix sticker picker height in emojo picker

---
 src/components/emoji_picker/emoji_picker.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 6608f393..29010c5b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -101,6 +101,10 @@
     }
   }
 
+  .stickers-content {
+    min-height: 269px;
+  }
+
   .emoji {
     &-search {
       padding: 5px;

From f6d8f245e68c8a1f747af527f59670d88bde5c08 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Mon, 9 Dec 2019 22:15:38 +0100
Subject: [PATCH 2/4] Revert "fix sticker picker height in emojo picker"

This reverts commit 914c78398469988f549930bd35d044082d155277.
---
 src/components/emoji_picker/emoji_picker.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 29010c5b..6608f393 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -101,10 +101,6 @@
     }
   }
 
-  .stickers-content {
-    min-height: 269px;
-  }
-
   .emoji {
     &-search {
       padding: 5px;

From 7e3a4fa8ec183f8e04804938d713953aed6bec66 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Mon, 9 Dec 2019 22:16:51 +0100
Subject: [PATCH 3/4] fix invisible tab-switcher in emoji picker

---
 .../sticker_picker/sticker_picker.vue         | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 323855b9..7d6fdc24 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -37,22 +37,18 @@
 .sticker-picker {
   width: 100%;
   position: relative;
-  .tab-switcher {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  .sticker-picker-content {
-    .sticker {
-      display: inline-block;
-      width: 20%;
-      height: 20%;
-      img {
-        width: 100%;
-        &:hover {
-          filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+  .contents {
+    min-height: 250px;
+    .sticker-picker-content {
+      .sticker {
+        display: inline-block;
+        width: 20%;
+        height: 20%;
+        img {
+          width: 100%;
+          &:hover {
+            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+          }
         }
       }
     }

From 32d7a49b9d02bfa6c6e997f4d6e923752b062a90 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Sun, 15 Dec 2019 17:58:37 +0100
Subject: [PATCH 4/4] use flex for stickers

---
 src/components/sticker_picker/sticker_picker.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 7d6fdc24..3863908a 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -36,16 +36,20 @@
 
 .sticker-picker {
   width: 100%;
-  position: relative;
   .contents {
     min-height: 250px;
     .sticker-picker-content {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 4px;
       .sticker {
-        display: inline-block;
-        width: 20%;
-        height: 20%;
+        display: flex;
+        flex: 1 1 auto;
+        margin: 4px;
+        width: 56px;
+        height: 56px;
         img {
-          width: 100%;
+          height: 100%;
           &:hover {
             filter: drop-shadow(0 0 5px var(--link, $fallback--link));
           }