fix: mobile view

Author: TheComputerM

panda.config.ts

@@ -74,6 +74,12 @@ export default defineConfig({
 			backgroundColor: "bg.default",
 			color: "fg.default",
 		},
+		h1: {
+			fontSize: "1.5rem",
+			sm: {
+				fontSize: "2rem",
+			}
+		}
 	},
 	globalVars: {
 		"--global-font-body": "JetBrains Mono Variable, monospace",

src/components/MDContainer.astro

@@ -4,7 +4,7 @@ import { Box, Container } from "styled-system/jsx";
 import { GridPattern } from "./mystic/GridPattern";
 
 interface Props {
-	class?: string;
+  class?: string;
 }
 
 const { class: className } = Astro.props;
@@ -18,6 +18,8 @@ const { class: className } = Astro.props;
       px="8"
       boxShadowColor="fg.canvas"
       boxShadow={{ sm: "8px 8px 0 0 var(--shadow-color)" }}
+      minWidth="0"
+      width="100%"
     >
       <main class={css({ maxWidth: "prose" })}>
         <slot />

src/layouts/app.css

@@ -39,7 +39,6 @@
 	}
 
 	h1 {
-		font-size: 2rem;
 		line-height: calc(2 * var(--line-heights-normal));
 		margin-bottom: calc(var(--line-heights-normal) * 2);
 		text-transform: uppercase;