change prose size on small

mlpierce22 · Dec 5, 2023 · 0777666 · 0777666
1 parent bc3d70d
commit 0777666
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/app/about/layout.tsx b/src/app/about/layout.tsx
@@ -2,7 +2,7 @@ import { Box } from "@chakra-ui/react";
 
 export default function MdxLayout({ children }: { children: React.ReactNode }) {
     return (
-        <Box as="div" p={10} className="prose md:prose-xl prose-stone dark:prose-invert overflow-scroll">
+        <Box as="div" p={10} className="prose prose-sm md:prose-xl prose-stone dark:prose-invert overflow-scroll">
             {children}
         </Box>
     )

diff --git a/src/app/prose-layout.tsx b/src/app/prose-layout.tsx
@@ -7,10 +7,10 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) {
     const router = useRouter();
     return (
         <VStack p={10} width={"100vw"}>
-            <Box as="div" className="prose md:prose-xl prose-stone dark:prose-invert overflow-scroll" >
-                <Button variant="solid" leftIcon={<IoMdArrowBack />} mb={10} width={"100%"} onClick={() => router.push("/projects")}>To Projects</Button>
+            <Box as="div" className="prose prose-sm md:prose-xl prose-stone dark:prose-invert overflow-scroll w-full" >
+                <Button variant="solid" leftIcon={<IoMdArrowBack />} mb={10} width={"100%"} onClick={() => router.push("/projects")} size={{ base: "sm", md: "lg" }}>To Projects</Button>
                 {children}
-                <Button variant="solid" leftIcon={<IoMdArrowBack />} mt={10} width={"100%"} onClick={() => router.push("/projects")}>To Projects</Button>
+                <Button variant="solid" leftIcon={<IoMdArrowBack />} mt={10} width={"100%"} onClick={() => router.push("/projects")} size={{ base: "sm", md: "lg" }}>To Projects</Button>
             </Box >
         </VStack>
     )