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

@@ -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 {

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>