From 4daf31efe70272ea73511a2003f7e1ab700e3c5c Mon Sep 17 00:00:00 2001
From: Grant Forrest <gaforres@gmail.com>
Date: Tue, 21 May 2024 15:58:36 -0400
Subject: [PATCH] ok really fix the thing now

---
 .../web/src/components/groceries/addBar/FloatingAdd.css    | 7 +++++++
 .../web/src/components/groceries/addBar/FloatingAdd.tsx    | 6 ++++--
 apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx     | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.css b/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.css
index e2ae0cc7..4da60a10 100644
--- a/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.css
+++ b/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.css
@@ -73,6 +73,8 @@
     clip-path: var(--clip-final);
     transform: translateX(0);
     opacity: 1;
+    width: auto;
+    height: auto;
   }
   80% {
     transform: translate(calc(-50% + 21px), var(--bar-initial-y-offset))
@@ -91,6 +93,8 @@
     transform: translate(calc(-50% + 21px), var(--bar-initial-y-offset))
       scale(var(--bar-scale-compensate));
     opacity: 0;
+    width: auto;
+    height: auto;
   }
 }
 
@@ -107,6 +111,9 @@
   transform: translate(calc(-50% + 21px), var(--bar-initial-y-offset))
     scale(var(--bar-scale-compensate));
 
+  width: 0;
+  height: 0;
+
   animation: addBarHideInset 0.2s ease-out;
 }
 .add-bar-hidden {
diff --git a/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.tsx b/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.tsx
index 1314f67f..643b45dd 100644
--- a/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.tsx
+++ b/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.tsx
@@ -54,7 +54,9 @@ export function FloatingAdd({ className, ...rest }: FloatingAddProps) {
         className={classNames(
           'relative z-1 shadow-xl',
           'add-bar',
-          open ? 'add-bar-visible' : 'add-bar-hidden pointer-events-none',
+          open
+            ? 'add-bar-visible pointer-events-auto'
+            : 'add-bar-hidden pointer-events-none',
           disableAnimation && 'disable-animation',
         )}
         {...rest}
@@ -64,7 +66,7 @@ export function FloatingAdd({ className, ...rest }: FloatingAddProps) {
         onClick={() => setOpen(true)}
         color="primary"
         className={classNames(
-          'absolute shadow-xl bottom-0 left-1/2 transform -translate-x-1/2',
+          'absolute shadow-xl bottom-0 left-1/2 transform -translate-x-1/2 pointer-events-auto',
           'add-button',
           open ? 'hidden' : 'visible',
         )}
diff --git a/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx b/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx
index 23fa7ae2..2fc5b940 100644
--- a/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx
+++ b/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx
@@ -81,7 +81,7 @@ export function GroceriesPage() {
         <List />
         <UnknownListRedirect listId={listId} />
         <AutoRestoreScroll />
-        <PageNowPlaying unstyled className="items-center">
+        <PageNowPlaying unstyled className="items-center pointer-events-none">
           <FloatingAdd />
         </PageNowPlaying>
       </ThemedPageContent>