Wrap the emoji categories in overlay view

Otherwise we get an unwanted horizontal scrollbar

Wrap the emoji categories in overlay view
Otherwise we get an unwanted horizontal scrollbar
9d8fe35e · JC Brand · 53b3f2d0 · 9d8fe35e · 9d8fe35e
Commit 9d8fe35e authored Oct 26, 2018 by JC Brand
Hide whitespace changes
Inline Side-by-side

Showing with 17 additions and 4 deletions

css/converse.css css/converse.css +6 -3

sass/_chatbox.scss sass/_chatbox.scss +11 -1

No files found.
--- 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 {

--- 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;
+                                }
+                            }
+                        }
+                    }
                }
            }
        }