Explorar o código

Wrap the emoji categories in overlay view

Otherwise we get an unwanted horizontal scrollbar
JC Brand %!s(int64=6) %!d(string=hai) anos
pai
achega
9d8fe35e55
Modificáronse 2 ficheiros con 17 adicións e 4 borrados
  1. 6 3
      css/converse.css
  2. 11 1
      sass/_chatbox.scss

+ 6 - 3
css/converse.css

@@ -9569,12 +9569,15 @@ body.reset {
   max-height: 200px; }
   max-height: 200px; }
 #conversejs.converse-overlayed .emoji-picker {
 #conversejs.converse-overlayed .emoji-picker {
   height: 100px; }
   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; }
   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%; }
     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; }
       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) {
 @media (max-width: 767.98px) {
   #conversejs.converse-overlayed > .row {
   #conversejs.converse-overlayed > .row {

+ 11 - 1
sass/_chatbox.scss

@@ -527,7 +527,7 @@
         height: $overlayed-emoji-picker-height;
         height: $overlayed-emoji-picker-height;
     }
     }
     .chatbox {
     .chatbox {
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             .chat-toolbar {
             .chat-toolbar {
                 li {
                 li {
                     .toolbar-menu {
                     .toolbar-menu {
@@ -541,6 +541,16 @@
                             }
                             }
                         }
                         }
                     }
                     }
+                    &.toggle-smiley {
+                        .emoji-toolbar {
+                            .emoji-category-picker {
+                                ul {
+                                    flex-wrap: wrap;
+                                    justify-content: flex-start;
+                                }
+                            }
+                        }
+                    }
                 }
                 }
             }
             }
         }
         }