From d1faa6d12980f407d5d72eadb2de86e244f52b18 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 16 Feb 2024 13:58:53 +0100
Subject: [PATCH] Fix emoji picker

Remove bounce effect on emojis hover.

Changelog: changed
---
 app/assets/javascripts/emoji/components/category.vue | 6 ++----
 app/assets/stylesheets/framework/emojis.scss         | 8 ++------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/emoji/components/category.vue b/app/assets/javascripts/emoji/components/category.vue
index eefb487b79beebb4..f9770733bcee2ed8 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 39b60aa3fae125ce..cfdf17f00db37598 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 {
-- 
GitLab