emoji-popover: Add centered layout for mobile/responsive.

This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.

Fixes: #6291.

static/js/emoji_picker.js

@@ -566,10 +566,19 @@ exports.render_emoji_popover = function (elt, id) {
         categories: get_rendered_emoji_categories(),
     };
     var placement = popovers.compute_placement(elt, APPROX_HEIGHT, APPROX_WIDTH, true);
+
+    var template = templates.render('emoji_popover', template_args);
+
+    // if the window is mobile sized, add the `.popover-flex` wrapper to the emoji
+    // popover so that it will be wrapped in flex and centered in the screen.
+    if (window.innerWidth <= 768) {
+        template = "<div class='popover-flex'>" + template + "</div>";
+    }
+
     elt.popover({
         // temporary patch for handling popover placement of `viewport_center`
         placement: placement === 'viewport_center' ? 'left' : placement,
-        template:  templates.render('emoji_popover', template_args),
+        template:  template,
         title:     "",
         content:   generate_emoji_picker_content(id),
         trigger:   "manual",

static/styles/popovers.css

@@ -127,6 +127,42 @@ ul.actions_popover i {
         background-color: #fff;
         pointer-events: all;
     }
+
+    .popover-flex {
+        position: absolute;
+        top: 0 !important;
+        left: 0 !important;
+
+        width: 100vw;
+        height: 100vh;
+
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+
+        background-color: rgba(0, 0, 0, 0.7);
+
+        z-index: 103;
+
+        opacity: 0;
+        pointer-events: none;
+
+        transition: all 0.3s ease;
+    }
+
+    .popover-flex.fade.in {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    .popover-flex .popover {
+        display: inline-block;
+    }
+
+    .emoji-info-popover {
+        position: static;
+        margin-right: 0;
+    }
 }
 
 .popover_user_presence {