Merge branch 'fix-emoji-picker-16-02' into 'master'

Emoji picker: Remove bounce effect from Emoji :hover state

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/144977



Merged-by: Phil Hughes <me@iamphill.com>
Approved-by: André Luís <aluis@gitlab.com>
Approved-by: Phil Hughes <me@iamphill.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Reviewed-by: André Luís <aluis@gitlab.com>
Co-authored-by: Julia Miocene <jmiocene@gitlab.com>

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">

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 {