From a05f83040726e24602f590b80fe303f8622b5a1e Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Wed, 22 Jun 2022 15:20:09 -0500
Subject: [PATCH] Responsive layout

---
 src/components/tutorial/CalenderExample.tsx | 6 +++---
 src/components/tutorial/index.tsx           | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx
index 806d2c3..115ee88 100644
--- a/src/components/tutorial/CalenderExample.tsx
+++ b/src/components/tutorial/CalenderExample.tsx
@@ -72,7 +72,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
   return (
     <VStack h="8.5rem" w="100%" spacing={0}>
       <HStack
-        px={6}
+        px={{ base: 1, sm: 2, md: 6 }}
         spacing={0}
         w="100%"
         h="auto"
@@ -108,7 +108,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
           );
         })}
       </HStack>
-      <SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
+      <SimpleGrid px={{ base: 1, sm: 2, md: 6 }} w="100%" h="100%" columns={7} alignItems="center">
         {currWeek.map((day: MonthDay) => {
           const { date, isOverflow, overflowDirection } = day;
 
@@ -142,7 +142,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
                 id.length
                   ? id
                   : format(toDateObj, "yyyyddLL") +
-                    `/${sticker === null ? 0 : sticker}`
+                  `/${sticker === null ? 0 : sticker}`
               }
             />
           );
diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx
index b0ed2ab..bcfd32c 100644
--- a/src/components/tutorial/index.tsx
+++ b/src/components/tutorial/index.tsx
@@ -56,8 +56,9 @@ const Tutorial = ({
         justifyContent="center"
         alignContent="center"
         my={8}
-        mx={4}
-        p={4}
+        mx={{ base: 0, sm: 2, md: 4 }}
+        py={4}
+        px={{ base: 0, sm: 2, md: 4 }}
         bg="gray.700"
       >
         <VStack
@@ -97,7 +98,7 @@ const Tutorial = ({
               w="100%"
               justifyContent="start"
               alignContent="center"
-              spacing={0}
+              spacing={1}
             >
               <Text>
                 {
@@ -139,7 +140,7 @@ const Tutorial = ({
             w="100%"
             justifyContent="start"
             alignContent="center"
-            spacing={2}
+            spacing={1}
           >
             <Text>
               {