From 4f45fdc6d9a908ade3cb82705582ce00be4362cc Mon Sep 17 00:00:00 2001
From: broody <broody@gmail.com>
Date: Fri, 15 Sep 2023 11:11:51 -0700
Subject: [PATCH] fix(web): drug card hover area

---
 .../pages/[gameId]/[locationSlug]/index.tsx   | 32 ++++++++++++-------
 web/src/pages/index.tsx                       |  2 +-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/[gameId]/[locationSlug]/index.tsx b/web/src/pages/[gameId]/[locationSlug]/index.tsx
index e72e13a64..510e7eb8b 100644
--- a/web/src/pages/[gameId]/[locationSlug]/index.tsx
+++ b/web/src/pages/[gameId]/[locationSlug]/index.tsx
@@ -13,6 +13,7 @@ import {
   StyleProps,
   useDisclosure,
   useBreakpointValue,
+  Flex,
 } from "@chakra-ui/react";
 import Layout from "@/components/Layout";
 import { useRouter } from "next/router";
@@ -120,24 +121,31 @@ export default function Location() {
                   {drugInfo.name}
                 </CardHeader>
                 <CardBody>
-                  <HStack w="full" justify="center" position="relative" m="2px">
-                    <HStack
+                  <HStack w="full" justify="center">
+                    <Flex
                       as={motion.div}
                       initial={{ opacity: 0 }}
                       whileHover={{ opacity: 1 }}
-                      w="full"
-                      p="20px"
-                      gap="10px"
+                      p="2px"
+                      align="center"
+                      boxSize="full"
                       position="absolute"
-                      bgColor="neon.900"
                       pointerEvents={["none", "auto"]}
                     >
-                      <BuySellBtns
-                        canBuy={canBuy}
-                        canSell={canSell}
-                        drugSlug={drugInfo.slug}
-                      />
-                    </HStack>
+                      <HStack
+                        h="100px"
+                        w="full"
+                        p="20px"
+                        gap="10px"
+                        bgColor="neon.900"
+                      >
+                        <BuySellBtns
+                          canBuy={canBuy}
+                          canSell={canSell}
+                          drugSlug={drugInfo.slug}
+                        />
+                      </HStack>
+                    </Flex>
                     {drugInfo.icon({})}
                   </HStack>
                 </CardBody>
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index 1ff62459c..f7a23f5d4 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -56,7 +56,7 @@ export default function Home() {
       setIsGated(window.location.host === "rollyourown.preview.cartridge.gg"),
     [],
   );
-  
+
   return (
     <Layout CustomLeftPanel={HomeLeftPanel}>
       <VStack boxSize="full" gap="10px" justify="center">