Improve styling for emoji-picker in the converse theme

css/converse.css

@@ -1754,13 +1754,13 @@
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
             box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-            z-index: 100; }
+            overflow-x: scroll; }
             #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
             #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
               background-color: #DCF9F6; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
-            height: 250px;
+            height: 100px;
             overflow: scroll; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
@@ -1841,6 +1841,14 @@
     #conversejs .chat-head {
       border-top-left-radius: 0;
       border-top-right-radius: 0; } }
+#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
+#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
+  display: table;
+  table-layout: fixed;
+  width: 100%; }
+  #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category,
+  #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category {
+    display: table-cell; }
 
 #conversejs #controlbox {
   margin-right: 1em; }

css/inverse.css

@@ -1800,7 +1800,7 @@ body {
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
             box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-            z-index: 100; }
+            overflow-x: scroll; }
             #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
             #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
               background-color: #DCF9F6; }

sass/_chatbox.scss

@@ -296,6 +296,7 @@
                 .toggle-occupants,
                 .toggle-clear,
                 .toggle-otr {
+
                     float: right;
                 }
                 li {
@@ -321,13 +322,13 @@
                         ul {
                             &.emoji-category-picker {
                                 box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-                                z-index: 100;
+                                overflow-x: scroll;
                                 .picked {
                                     background-color: $highlight-color;
                                 }
                             }
                             &.emoji-picker {
-                                height: 250px;
+                                height: $emoji-picker-height;
                                 overflow: scroll;
                             }
                             li {

sass/converse/_chatbox.scss

@@ -12,4 +12,25 @@
             border-top-right-radius: 0;
         }
     }
+    .chatbox {
+        form.sendXMPPMessage {
+            .chat-toolbar {
+                li {
+                    .toolbar-menu {
+                        ul {
+                            &.emoji-category-picker {
+                                display: table;
+                                table-layout: fixed;
+                                width: 100%;
+                                .emoji-category {
+                                    display: table-cell;
+                                }
+                            }
+                        }
+                    }
+
+                }
+            }
+        }
+    }
 }

sass/converse/_variables.scss

@@ -100,6 +100,8 @@ $legend-font-size: 16px !default;
 $toolbar-height: 25px !default;
 $toolbar-color: $greenish-white !default;
 
+$emoji-picker-height: 100px !default;
+
 $line-height-small:  14px !default;
 $line-height:  16px !default;
 

sass/inverse/_variables.scss

@@ -103,6 +103,8 @@ $legend-font-size: 18px !default;
 $toolbar-height: 29px !default;
 $toolbar-color: $greenish-white !default;
 
+$emoji-picker-height: 250px !default;
+
 $line-height-small:  20px !default;
 $line-height:  22px !default;
 

src/utils.js

@@ -612,7 +612,7 @@
             const excluded_substrings = [
                 ':woman', ':man', ':women_', ':men_', '_man_', '_woman_', '_woman:', '_man:'
             ];
-            const excluded_categories = ['modifier'];
+            const excluded_categories = ['modifier', 'regional'];
             const categories = _.difference(
                 _.uniq(_.map(emojis, _.partial(_.get, _, 'category'))),
                 excluded_categories
@@ -634,6 +634,8 @@
                     list = _.union(_.slice(list, 24-1), _.slice(list, 0, 24));
                 } else if (cat === 'travel') {
                     list = _.union(_.slice(list, 17-1), _.slice(list, 0, 17));
+                } else if (cat === 'symbols') {
+                    list = _.union(_.slice(list, 60-1), _.slice(list, 0, 60));
                 }
                 emojis_by_category[cat] = list;
             });