src/components/emoji_picker/emoji_picker.js

@@ -135,9 +135,6 @@ const EmojiPicker = {
     Popover
   },
   methods: {
-    groupScroll (e) {
-      e.currentTarget.scrollLeft += e.deltaY + e.deltaX
-    },
     updateEmojiSize () {
       const css = window.getComputedStyle(this.$refs.popover.$el)
       const emojiSize = css.getPropertyValue('--emojiSize')

src/components/emoji_picker/emoji_picker.scss

@@ -166,6 +166,24 @@
       }
     }
 
+    &-group {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: left;
+
+      &-title {
+        font-size: 0.85em;
+        width: 100%;
+        margin: 0;
+        padding-left: 0.3em;
+
+        &.disabled {
+          display: none;
+        }
+      }
+    }
+
     &-item {
       width: var(--emoji-size);
       height: var(--emoji-size);
@@ -188,38 +206,9 @@
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: calc(var(--emoji-size) * 0.8);
+        font-size: 1.6em;
         overflow: hidden;
       }
     }
-
-    &-group {
-      display: grid;
-      grid-template-columns: repeat(var(--__amount), 1fr);
-      justify-items: center;
-      align-items: center;
-      justify-content: left;
-      grid-template-rows: repeat(1, auto);
-
-      &.first-row {
-        grid-template-rows: repeat(2, auto);
-
-        .emoji-item {
-          grid-row: 2;
-        }
-      }
-
-      &-title {
-        font-size: 0.85em;
-        grid-column: span var(--__amount);
-        width: 100%;
-        margin: 0;
-        padding-left: 0.3em;
-
-        &.disabled {
-          display: none;
-        }
-      }
-    }
   }
 }

src/components/emoji_picker/emoji_picker.vue

@@ -8,9 +8,7 @@
     @close="onPopoverClosed"
   >
     <template #content>
-      <div
-        class="heading"
-      >
+      <div class="heading">
         <!--
           Body scroll lock needs to be on every scrollable element on safari iOS.
           Here we tell it to enable scrolling for this element.
@@ -20,7 +18,6 @@
           ref="header"
           v-body-scroll-lock="isInModal"
           class="emoji-tabs"
-          @wheel.prevent="groupScroll"
         >
           <span
             v-for="group in filteredEmojiGroups"
@@ -109,8 +106,6 @@
               >
                 <div
                   class="emoji-group"
-                  :class="{ ['first-row']: group.isFirstRow }"
-                  :style="{ '--__amount': itemPerRow }"
                 >
                   <h6
                     v-if="group.isFirstRow"

src/components/emoji_reactions/emoji_reactions.js

@@ -1,6 +1,5 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
-import StillImage from 'src/components/still-image/still-image.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faPlus,
@@ -20,8 +19,7 @@ const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
     UserAvatar,
-    UserListPopover,
-    StillImage
+    UserListPopover
   },
   props: ['status'],
   data: () => ({

src/components/emoji_reactions/emoji_reactions.vue

@@ -18,11 +18,12 @@
         <span
           class="reaction-emoji"
         >
-          <StillImage
+          <img
             v-if="reaction.url"
             :src="reaction.url"
             class="reaction-emoji-content"
-          />
+            width="1em"
+          >
           <span
             v-else
             class="reaction-emoji reaction-emoji-content"
@@ -131,16 +132,12 @@
     .reaction-emoji-content {
       max-width: 100%;
       max-height: 100%;
-      width: var(--emoji-size);
-      height: var(--emoji-size);
+      width: auto;
+      height: auto;
       line-height: inherit;
       overflow: hidden;
       font-size: calc(var(--emoji-size) * 0.8);
       margin: 0;
-
-      img {
-        object-fit: contain;
-      }
     }
 
     &:focus {