Tweak emoji CSS for overlayed view mode

sass/_emoji.scss

@@ -150,8 +150,15 @@
         height: var(--overlayed-emoji-picker-height);
     }
     .chatbox {
+        .sendXMPPMessage {
             .toggle-smiley {
                 .emoji-picker.toolbar-menu {
+                    li {
+                        &.insert-emoji {
+                            height: 20px;
+                            width: 20px;
+                        }
+                    }
                     .emoji-picker__container {
                         .emoji-picker {
                             .insert-emoji {
@@ -165,7 +172,8 @@
                         }
                         .emoji-picker__header {
                             .emoji-category {
-                            font-size: var(--font-size);
+                                font-size: var(--font-size-small);
+                            }
                         }
                     }
                 }

sass/_variables.scss

@@ -171,7 +171,7 @@ $mobile_portrait_length: 480px !default;
     --overlayed-chat-height: 450px;
     --overlayed-chat-width: 250px;
     --overlayed-chatbox-hover-height: 1em;
-    --overlayed-emoji-picker-height: 150px;
+    --overlayed-emoji-picker-height: 200px;
     --overlayed-max-chat-textarea-height: 200px;
     --overlayed-badge-color: #818479; // $gray-color
 

webpack.html

@@ -29,7 +29,7 @@
         muc_domain: 'conference.chat.example.org',
         muc_respect_autojoin: true,
         password: 'secret',
-        view_mode: 'fullscreen',
+        view_mode: 'overlayed',
         websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],
     });