⚒️ Fix layout & responsive.

src/components/svgInfo.tsx

@@ -58,28 +58,30 @@ const SVGInfo = (props: SVGCardProps) => {
       <Heading mt={6} mb={6} fontSize="4xl">
         {props.title}
       </Heading>
-      <HStack spacing={4}>
+      <Flex direction={{ base: "column", md: "row" }}>
         <Button
           variant="ghost"
           borderWidth="1px"
           leftIcon={<Copy />}
           onClick={() => copyToClipboard(props.slug)}
+          mb={{ base: "2", md: "0" }}
+          mr={{ base: "0", md: "3" }}
         >
           Copy to clipboard
         </Button>
         <Button
-          mb={{ base: "2", md: "0" }}
           leftIcon={<DownloadSimple />}
           variant="primary"
-          mr="2"
           onClick={() => downloadSvg(props.slug)}
+          mb={{ base: "2", md: "0" }}
+          mr={{ base: "0", md: "3" }}
         >
           Download .svg
         </Button>
         <Link href={props.url} isExternal={true}>
-          {props.title} website <Icon as={ArrowSquareOut} ml="1" />
+          {props.title} website <Icon as={ArrowSquareOut} mt="2" />
         </Link>
-      </HStack>
+      </Flex>
     </Flex>
   );
 };

src/layout/header/index.tsx

@@ -27,6 +27,7 @@ const Header = () => {
   return (
     <>
       <Box
+        as="header"
         position="sticky"
         top="0"
         bg={bg}
@@ -68,7 +69,9 @@ const Header = () => {
                 ))}
                 <CustomIconBtn
                   title="Toggle Search bar"
-                  icon={isOpen ? <X size={22} /> : <MagnifyingGlass size={22} />}
+                  icon={
+                    isOpen ? <X size={22} /> : <MagnifyingGlass size={22} />
+                  }
                   onClick={onToggle}
                 />
                 <Theme />
@@ -83,18 +86,24 @@ const Header = () => {
               <Search />
             </Box>
           </Collapse>
+          <Box mt="2" display={{ base: "block", md: "none" }}>
+            <Search />
+          </Box>
         </Container>
       </Box>
-      <HStack
-        justifyContent="center"
-        p="4"
-        spacing={4}
-        overflowY="hidden"
-        bg={bg}
-        borderBottomWidth="1px"
-      >
-        <Categories />
-      </HStack>
+      <Box p="4" overflowX="hidden" overflowY="auto">
+        <HStack
+          justifyContent={{ base: "none", md: "center" }}
+          spacing={4}
+          overflowX="auto"
+          overflowY="hidden"
+          bg={bg}
+          pb="4"
+          borderBottomWidth="1px"
+        >
+          <Categories />
+        </HStack>
+      </Box>
     </>
   );
 };

src/layout/header/mobile.tsx

@@ -30,13 +30,14 @@ const Mobile = () => {
         right={0}
         display={mobileNav.isOpen ? "flex" : "none"}
         flexDirection="column"
-        p={2}
+        p={4}
         pb={4}
-        m={2}
         bg={bg}
         spacing={3}
         rounded="sm"
         shadow="sm"
+        borderWidth="1px"
+        zIndex={2}
       >
         <CloseButton aria-label="Close menu" onClick={mobileNav.onClose} />
         {Links.map((link) => (

src/layout/index.tsx

@@ -8,7 +8,7 @@ const Index = ({ children }: LayoutProps) => {
   return (
     <>
       <Header />
-      <Container maxW="70%" mt="5">{children}</Container>
+      <Container maxW={{ base: "100%", md: "70%" }} mt={{ base: "1", md: "3" }}>{children}</Container>
       <Footer />
     </>
   );

src/pages/category/[category].tsx

@@ -25,9 +25,7 @@ export default function Category() {
       </Head>
       <Show>
         <Center>
-          <Heading mt="4" mb="5">
-            {router.query.category}
-          </Heading>
+          <Heading mb="5">{router.query.category}</Heading>
         </Center>
       </Show>