From 438ad54701202c544bae72af341e19c8bff337db Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 20 Oct 2019 12:31:28 +0300
Subject: [PATCH] Remove space between emojis in picker

Signed-off-by: Tulir Asokan <tulir@maunium.net>
---
 res/css/views/emojipicker/_EmojiPicker.scss | 17 +++++++++++------
 src/components/views/emojipicker/Emoji.js   |  6 ++++--
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 5f3cfb8133..6dcc4d75b9 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -145,17 +145,22 @@ limitations under the License.
     margin: 0;
 }
 
-.mx_EmojiPicker_item {
+.mx_EmojiPicker_item_wrapper {
+    display: inline-block;
     list-style: none;
+    width: 38px;
+    cursor: pointer;
+}
+
+.mx_EmojiPicker_item {
     display: inline-block;
     font-size: 20px;
-    margin: 1px;
-    padding: 4px 0;
-    width: 36px;
+    padding: 5px;
+    width: 100%;
+    height: 100%;
     box-sizing: border-box;
     text-align: center;
     border-radius: 4px;
-    cursor: pointer;
 
     &:hover {
         background-color: $focus-bg-color;
@@ -165,7 +170,7 @@ limitations under the License.
 .mx_EmojiPicker_item_selected {
     color: rgba(0, 0, 0, .5);
     border: 1px solid $input-valid-border-color;
-    margin: 0;
+    padding: 4px;
 }
 
 .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
diff --git a/src/components/views/emojipicker/Emoji.js b/src/components/views/emojipicker/Emoji.js
index 8d6ffe122b..75f23c5761 100644
--- a/src/components/views/emojipicker/Emoji.js
+++ b/src/components/views/emojipicker/Emoji.js
@@ -33,8 +33,10 @@ class Emoji extends React.PureComponent {
             <li onClick={() => onClick(emoji)}
                 onMouseEnter={() => onMouseEnter(emoji)}
                 onMouseLeave={() => onMouseLeave(emoji)}
-                className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
-                {emoji.unicode}
+                className="mx_EmojiPicker_item_wrapper">
+                <div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
+                    {emoji.unicode}
+                </div>
             </li>
         );
     }