diff --git a/app/assets/javascripts/emoji/components/category.vue b/app/assets/javascripts/emoji/components/category.vue
index eefb487b79beebb4d605a053461f36d7d2c86ffe..f9770733bcee2ed8a638387a2e9e18c1bd7a9bc9 100644
--- a/app/assets/javascripts/emoji/components/category.vue
+++ b/app/assets/javascripts/emoji/components/category.vue
@@ -42,10 +42,8 @@ export default {
 </script>
 
 <template>
-  <gl-intersection-observer class="gl-px-5 gl-h-full" @appear="categoryAppeared">
-    <div
-      class="gl-top-0 gl-py-3 gl-w-full gl-z-index-1 gl-font-sm gl-ml-n2 emoji-picker-category-header"
-    >
+  <gl-intersection-observer class="gl-px-4 gl-h-full" @appear="categoryAppeared">
+    <div class="gl-top-0 gl-py-3 gl-w-full gl-z-index-1 gl-font-sm emoji-picker-category-header">
       <b>{{ categoryTitle }}</b>
     </div>
     <template v-if="emojis.length">
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 39b60aa3fae125ce3391227ba2c064fd525259a3..cfdf17f00db37598ecf8dd5e049cd2d1acc3dcff 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -34,14 +34,10 @@ gl-emoji {
   height: 30px;
   // Create a width that fits 9 emojis per row
   width: 100 / 9 * 1%;
-  transition: transform 0.15s cubic-bezier(0.3, 0, 0.2, 2) !important;
-  transform: scale(1) !important;
   mix-blend-mode: normal !important;
 
-  &:hover,
-  &:focus {
-    z-index: 2;
-    transform: scale(1.3) !important;
+  gl-emoji {
+    font-size: 1.2rem !important;
   }
 
   gl-emoji img {