Fix copy button position

Author: forestream

apps/landing/src/app/(detail)/components/MdxCardFooter.tsx

@@ -52,48 +52,50 @@ export default function MdxCardFooter({
         </Center>
       </Flex>
       {isOpen && (
-        <Box
-          borderTop="1px solid $border"
-          h="100%"
-          overflow="auto"
-          pos="relative"
-          px="24px"
-          py="16px"
-        >
-          <Center
-            _active={{
-              borderColor: '$primary',
-              bg: '$menuActive',
-            }}
-            _hover={{
-              borderColor: '$primary',
-              bg: '$menuHover',
-            }}
-            bg="$containerBackground"
-            border="1px solid transparent"
-            borderRadius="4px"
-            boxShadow="0 2px 6px 0 $shadow"
-            cursor="pointer"
-            gap="8px"
-            onClick={handleCopy}
-            p="8px"
-            pos="absolute"
-            right="24px"
-            top="16px"
-            transition="all 0.125s ease-in-out"
+        <>
+          <Box h="0" pos="relative" w="100%">
+            <Center
+              _active={{
+                borderColor: '$primary',
+                bg: '$menuActive',
+              }}
+              _hover={{
+                borderColor: '$primary',
+                bg: '$menuHover',
+              }}
+              bg="$containerBackground"
+              border="1px solid transparent"
+              borderRadius="4px"
+              boxShadow="0 2px 6px 0 $shadow"
+              cursor="pointer"
+              gap="8px"
+              onClick={handleCopy}
+              p="8px"
+              pos="absolute"
+              right="16px"
+              top="16px"
+              transition="all 0.125s ease-in-out"
+            >
+              <Image
+                aspectRatio="1"
+                boxSize="20px"
+                src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
+              />
+              <Text color="$captionBold" typography="caption">
+                Copy
+              </Text>
+            </Center>
+          </Box>
+          <Box
+            borderTop="1px solid $border"
+            h="100%"
+            overflow="auto"
+            px="24px"
+            py="16px"
           >
-            <Image
-              aspectRatio="1"
-              boxSize="20px"
-              src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
-            />
-            <Text color="$captionBold" typography="caption">
-              Copy
-            </Text>
-          </Center>
-
-          {children}
-        </Box>
+            {children}
+          </Box>
+        </>
       )}
     </VStack>
   )