UX: Emoji Toolbar was too wide on mobile.

app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6

@@ -236,6 +236,8 @@ var showSelector = function(options) {
     closeSelector();
   });
 
+  if (Discourse.Mobile.mobileView) PER_ROW = 9;
+
   var page = parseInt(localStorage.emojiPage) || 0;
   var offset = parseInt(localStorage.emojiOffset) || 0;
   render(page, offset, options);

app/assets/stylesheets/common/base/emoji.scss

@@ -9,10 +9,9 @@ body img.emoji {
 }
 
 .emoji-modal {
+  @include transform(translate(-50%, -50%));
   z-index: 10000;
   position: fixed;
-  margin-left: -195px;
-  margin-top: -100px;
   left: 50%;
   top: 50%;
   background-color: dark-light-choose(#dadada, blend-primary-secondary(5%));

app/assets/stylesheets/mobile.scss

@@ -20,6 +20,7 @@
 @import "mobile/directory";
 @import "mobile/menu-panel";
 @import "mobile/search";
+@import "mobile/emoji";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 

app/assets/stylesheets/mobile/emoji.scss

@@ -0,0 +1,3 @@
+.emoji-table-wrapper {
+  min-width: 320px;
+}