Fix emoji toolbar styling for embedded mode

css/converse.css

@@ -8001,6 +8001,9 @@ body.reset {
   #conversejs.converse-overlayed .chat-head .chatbox-buttons {
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%; }
+#conversejs.converse-embedded .emoji-picker,
+#conversejs.converse-overlayed .emoji-picker {
+  height: 200px; }
 #conversejs.converse-embedded .chatbox,
 #conversejs.converse-overlayed .chatbox {
   min-width: 250px !important;
@@ -8009,15 +8012,6 @@ body.reset {
   #conversejs.converse-overlayed .chatbox .box-flyout {
     min-width: 250px !important;
     width: 250px; }
-#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
-#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
-  min-width: 235px; }
-  #conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-  #conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
-    width: 100%; }
-    #conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
-    #conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
-      float: left; }
 
 #conversejs.converse-overlayed .flyout {
   bottom: 1em; }
@@ -8030,6 +8024,12 @@ body.reset {
   max-height: 200px; }
 #conversejs.converse-overlayed .emoji-picker {
   height: 100px; }
+#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+  min-width: 235px; }
+  #conversejs.converse-overlayed .chatbox form.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 {
+      float: left; }
 
 @media (max-width: 767.98px) {
   #conversejs.converse-overlayed > .row {

sass/_chatbox.scss

@@ -486,6 +486,10 @@
         }
     }
 
+    .emoji-picker {
+        height: $embedded-emoji-picker-height;
+    }
+    
     .chatbox {
         min-width: $overlayed-chat-width!important;
         width: $overlayed-chat-width;
@@ -495,26 +499,6 @@
             width: $overlayed-chat-width;
         }
     }
-    .chatbox {
-        form.sendXMPPMessage {
-            .chat-toolbar {
-                li {
-                    .toolbar-menu {
-                        min-width: 235px;
-
-                        ul {
-                            &.emoji-toolbar {
-                                width: 100%;
-                                .emoji-category {
-                                    float: left;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
 }
 
 #conversejs.converse-overlayed  {
@@ -534,6 +518,25 @@
     .emoji-picker {
         height: $overlayed-emoji-picker-height;
     }
+    .chatbox {
+        form.sendXMPPMessage {
+            .chat-toolbar {
+                li {
+                    .toolbar-menu {
+                        min-width: 235px;
+                        ul {
+                            &.emoji-toolbar {
+                                width: 100%;
+                                .emoji-category {
+                                    float: left;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 @include media-breakpoint-down(sm) {

sass/_variables.scss

@@ -145,6 +145,8 @@ $line-height-huge:  27px !default;
 
 $occupants-padding: 1em;
 
+$embedded-emoji-picker-height: 200px !default;
+
 $fullpage-chat-head-height: 62px !default;
 $fullpage-chat-height: 100vh;
 $fullpage-chat-width: 100%;