From edc0f6192074e243a36efbbbbc818048a6a31def Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 26 Mar 2021 13:07:04 -0400
Subject: [PATCH] UX: Emoji popup layout adjustments (#12533)

---
 app/assets/stylesheets/common/base/emoji.scss | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index ecbdaab49b8..89966b36c71 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -60,6 +60,7 @@ sup img.emoji {
     width: 100%;
     box-sizing: border-box;
     padding: 0.25em;
+    padding-left: 0.75em;
     height: 100%;
     background: var(--secondary);
 
@@ -101,8 +102,9 @@ sup img.emoji {
   }
 
   .emoji-picker-category-buttons {
-    overflow-y: scroll;
-    width: 60px;
+    overflow-y: auto;
+    width: 50px;
+    padding-left: 0.5em;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
@@ -131,7 +133,7 @@ sup img.emoji {
   display: flex;
   width: 100%;
   position: relative;
-  padding: 0.25em;
+  padding: 0.75em;
   border-bottom: 1px solid var(--primary-low);
   box-sizing: border-box;
   align-items: center;
@@ -139,17 +141,17 @@ sup img.emoji {
   .filter {
     flex: 1 0 auto;
     margin: 0;
-    border: 0;
-    padding: 0;
-
-    &:focus {
-      box-shadow: none;
-    }
+    width: calc(100% - 50px);
+    margin-right: 0.5em;
   }
 
   .d-icon {
     color: var(--primary-medium);
-    margin-right: 0.5em;
+    cursor: pointer;
+    padding: 0.25em;
+    &:hover {
+      color: var(--tertiary);
+    }
   }
 }