From 57c3a86799cbf7a6d93e8abb9499c99134a2befc Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 18 Oct 2024 11:22:05 -0700
Subject: [PATCH] Animate up instead of down when dropdowns open up

---
 src-web/components/core/Dropdown.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index 2c5e6b67..ed2dc91b 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -350,8 +350,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     container: CSSProperties;
     menu: CSSProperties;
     triangle: CSSProperties;
+    upsideDown: boolean;
   }>(() => {
-    if (triggerShape == null) return { container: {}, triangle: {}, menu: {} };
+    if (triggerShape == null) return { container: {}, triangle: {}, menu: {}, upsideDown: false };
 
     const menuMarginY = 5;
     const docRect = document.documentElement.getBoundingClientRect();
@@ -364,6 +365,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     const upsideDown = heightBelow < heightAbove && heightBelow < items.length * 25 + 20 + 200;
     const triggerWidth = triggerShape.right - triggerShape.left;
     return {
+      upsideDown,
       container: {
         top: !upsideDown ? top + menuMarginY : undefined,
         bottom: upsideDown
@@ -426,7 +428,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
             <motion.div
               tabIndex={0}
               onKeyDown={handleMenuKeyDown}
-              initial={{ opacity: 0, y: -5, scale: 0.98 }}
+              initial={{ opacity: 0, y: (styles.upsideDown ? 1 : -1) * 5, scale: 0.98 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
               role="menu"
               aria-orientation="vertical"