fix: responsive

Author: raitucarp

src/app/~/[slug]/page.tsx

@@ -29,11 +29,11 @@ export default async function Post(props: Params) {
       <Portal>
         <ReadingTimeProgressBar />
       </Portal>
-      <VStack as="article" alignItems={"start"} py={{ base: "3rem" }}>
+      <VStack as="article" alignItems={"start"} py={{ base: "3rem" }} w="100%">
         <PostHeader
           _heading={{
-            fontSize: ["2xl", "5xl"],
-            lineHeight: ["tall", "shorter"],
+            fontSize: { base: "2xl", lg: "5xl" },
+            lineHeight: { base: "tall", lg: "shorter" },
             className: merriweather.className,
           }}
           {...post}

src/components/posts/header.tsx

@@ -17,7 +17,7 @@ export const PostHeader = ({
       <Heading lineHeight={"short"} {..._heading}>
         {title}
       </Heading>
-      <HStack>
+      <HStack wrap="wrap">
         <Badge size={"lg"}>{author}</Badge>
         <Badge size={"lg"}>{stats?.text}</Badge>
         <Badge size={"lg"}>{format(date, "dd MMMM yyy")}</Badge>