From 6dd63ee3dac880db99d5cf59c823e3ef000f0cba Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Fri, 15 Jul 2022 22:47:54 +0530
Subject: [PATCH] Bug(header): profile dropdown flickering on mobile (#3071)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>
---
 apps/web/styles/globals.css | 35 ++++++++++++++++++++---------------
 packages/ui/Dropdown.tsx    |  2 +-
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 48344ee00c..dfe3f670eb 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -410,13 +410,15 @@ hr {
 }
 
 @keyframes slideInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(30%);
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+        transform: translateY(30%);
+        pointer-events: none;
+    }
+    to { 
+        opacity: 1;
+        pointer-events: auto;
+    }
 }
 
 /* animations */
@@ -427,14 +429,17 @@ hr {
 }
 
 @keyframes slideInTop {
-  from {
-    opacity: 0;
-    transform: translateY(-20%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0%);
-  }
+    from {
+      opacity: 0;
+      transform: translateY(-20%);
+      pointer-events: none;
+    }
+    to { 
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0%);
+
+    }
 }
 
 .fadeIn {
diff --git a/packages/ui/Dropdown.tsx b/packages/ui/Dropdown.tsx
index 476a1c9082..f6ed84a851 100644
--- a/packages/ui/Dropdown.tsx
+++ b/packages/ui/Dropdown.tsx
@@ -29,7 +29,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
       <DropdownMenuPrimitive.Content
         portalled={props.portalled}
         {...props}
-        className="w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        className="slideInTop w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>