better hitbox for status emoji

2 files changed, 18 insertions, 7 deletions

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5e849dd7..a0756ae4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -696,6 +696,22 @@ $status-margin: 0.75em;
     line-height: 1.4em;
     white-space: pre-wrap;
 
+    .emoji-container {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      z-index: 1;
+
+      &:hover {
+        z-index: 2;
+
+        .emoji {
+          transform: scale(3);
+          z-index: 2;
+        }
+      }
+    }
+
     img, video {
       max-width: 100%;
       max-height: 400px;
@@ -707,12 +723,7 @@ $status-margin: 0.75em;
         height: 32px;
         transition: transform 200ms;
         transform: scale(1);
-        z-index: 1;
-
-        &:hover {
-          transform: scale(3);
-          z-index: 2;
-        }
+        pointer-events: none;
       }
     }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 6cc1851d..17b4a6e0 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => {
   return emojis.reduce((acc, emoji) => {
     return acc.replace(
       new RegExp(`:${emoji.shortcode}:`, 'g'),
-      `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
+      `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>`
     )
   }, string)
 }