Eagerly render emoji picker and avoid overflow in overlay view

css/converse.css

@@ -5377,15 +5377,18 @@ body.reset {
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
       #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione {
         margin-bottom: -5px; }
-#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
-  width: 100%; }
-  #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
-  #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
-    float: left; }
-  #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-  #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
-    padding: 2px; }
+#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
+#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+  min-width: 15rem; }
+  #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+  #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+    width: 100%; }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
+    #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
+      float: left; }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
+    #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
+      padding: 2px; }
 #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
 #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
   padding: 2px; }

sass/converse/_chatbox.scss

@@ -42,6 +42,8 @@
             .chat-toolbar {
                 li {
                     .toolbar-menu {
+                        min-width: 15rem;
+
                         ul {
                             &.emoji-toolbar {
                                 width: 100%;

src/converse-chatview.js

@@ -987,7 +987,6 @@
                 toggleEmojiMenu (ev) {
                     if (_.isUndefined(this.emoji_dropdown)) {
                         ev.stopPropagation();
-                        this.renderEmojiPicker();
                         const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
                         this.emoji_dropdown = new bootstrap.Dropdown(dropdown_el, true);
                         this.emoji_dropdown.toggle();
@@ -1099,6 +1098,7 @@
                         this.model.save();
                     }
                     this.setChatState(_converse.ACTIVE);
+                    this.renderEmojiPicker();
                     this.scrollDown();
                     if (focus) {
                         this.focus();