From 9d8fe35e5586f3f7434650e7c1526783168207ac Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 26 Oct 2018 12:27:18 +0200
Subject: [PATCH] Wrap the emoji categories in overlay view

Otherwise we get an unwanted horizontal scrollbar
---
 css/converse.css   |  9 ++++++---
 sass/_chatbox.scss | 12 +++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index e5e75d243..e863fb1ce 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -9569,12 +9569,15 @@ body.reset {
   max-height: 200px; }
 #conversejs.converse-overlayed .emoji-picker {
   height: 100px; }
-#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+#conversejs.converse-overlayed .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
   min-width: 235px; }
-  #conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+  #conversejs.converse-overlayed .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
     width: 100%; }
-    #conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
+    #conversejs.converse-overlayed .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
       float: left; }
+#conversejs.converse-overlayed .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
+  flex-wrap: wrap;
+  justify-content: flex-start; }
 
 @media (max-width: 767.98px) {
   #conversejs.converse-overlayed > .row {
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 3ae52edd8..21da3c854 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -527,7 +527,7 @@
         height: $overlayed-emoji-picker-height;
     }
     .chatbox {
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             .chat-toolbar {
                 li {
                     .toolbar-menu {
@@ -541,6 +541,16 @@
                             }
                         }
                     }
+                    &.toggle-smiley {
+                        .emoji-toolbar {
+                            .emoji-category-picker {
+                                ul {
+                                    flex-wrap: wrap;
+                                    justify-content: flex-start;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }