fix(web): drug card hover area

cartridge-gg · Sep 15, 2023 · 4f45fdc · 4f45fdc · vercel · Sep 15, 2023
1 parent a5d96a7
commit 4f45fdc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git 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
@@ -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">