From 5175b362f759b124b9665e0a5d325b8f702b9472 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@did.science>
Date: Thu, 10 Jun 2021 16:54:12 +0200
Subject: [PATCH] Fixed the bugged emoji picker

---
 shared/js/ui/react-elements/DetachButtons.scss | 14 ++++++++++----
 shared/js/ui/react-elements/Icon.scss          |  5 +++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/shared/js/ui/react-elements/DetachButtons.scss b/shared/js/ui/react-elements/DetachButtons.scss
index 9986ec76..367484f9 100644
--- a/shared/js/ui/react-elements/DetachButtons.scss
+++ b/shared/js/ui/react-elements/DetachButtons.scss
@@ -1,13 +1,17 @@
 @import "../../../css/static/mixin";
 @import "../../../css/static/properties";
 
+$animation_time: $button_hover_animation_time;
 .container {
     position: relative;
-    overflow: hidden;
+    /* Don't use overflow hidden here since some container may require overflow */
 
     &:hover {
         .containerButton {
             top: 1em;
+            opacity: 1;
+
+            @include transition(top ease-in-out $animation_time, opacity ease-in-out $animation_time / 2 $animation_time / 2);
         }
     }
 }
@@ -16,10 +20,12 @@
     position: absolute;
     z-index: 10;
 
-    top: -3em;
+    opacity: 0;
+    top: -1em;
+
     right: 1em;
 
-    @include transition(all ease-in-out $button_hover_animation_time);
+    @include transition(top ease-in-out $animation_time, opacity ease-in-out $animation_time / 2);
 
     &.disabled {
         display: none;
@@ -38,7 +44,7 @@
 
     cursor: pointer;
 
-    @include transition(all ease-in-out $button_hover_animation_time);
+    @include transition(all ease-in-out $animation_time);
 
     &:hover {
         background-color: #0000008f;
diff --git a/shared/js/ui/react-elements/Icon.scss b/shared/js/ui/react-elements/Icon.scss
index 2e10c1f4..33b17a8d 100644
--- a/shared/js/ui/react-elements/Icon.scss
+++ b/shared/js/ui/react-elements/Icon.scss
@@ -2,6 +2,11 @@
     width: 1em;
     height: 1em;
 
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    align-self: center;
+
     display: flex;
     flex-direction: column;
     justify-content: stretch;