feat: for mobile

src/component/Header/Header.tsx

@@ -8,7 +8,7 @@ import {
   rem,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { useDocumentTitle } from "@mantine/hooks";
+import { useDocumentTitle, useMediaQuery } from "@mantine/hooks";
 import { IconSearch, IconSettings } from "@tabler/icons-react";
 import { Dispatch, SetStateAction, createContext, useContext } from "react";
 import { useNavigate } from "react-router";
@@ -55,6 +55,7 @@ export const TitleContext = createContext<
 export function HeaderSearch() {
   const { classes } = useStyles();
   const [title, _] = useContext(TitleContext);
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   useDocumentTitle(title);
   const navigate = useNavigate();
@@ -77,10 +78,12 @@ export function HeaderSearch() {
           <Text weight={600} component="a" href="/">
             DS-Next
           </Text>
-          <Text weight={600} component="span">
-            {" | "}
-            {title}
-          </Text>
+          {!isMobile && (
+            <Text weight={600} component="span">
+              {" | "}
+              {title}
+            </Text>
+          )}
         </span>
         <Group>
           <form onSubmit={form.onSubmit(submit)}>

src/layout/MainLayout.tsx

@@ -28,8 +28,8 @@ export default function MainLayout() {
         <HeaderSearch />
         <Box className={classes.contentContainer}>
           <Suspense fallback={<Loading />}>
-            <ScrollArea h="100%">
-              <Container>
+            <ScrollArea h="100%" w="100vw">
+              <Container maw="100vw">
                 <Outlet />
               </Container>
             </ScrollArea>

src/page/Paragraph.tsx

@@ -2,7 +2,6 @@ import {
   Badge,
   Container,
   Group,
-  ScrollArea,
   Text,
   Title,
   TypographyStylesProvider,
@@ -73,46 +72,44 @@ export default function ParagraphPage() {
   }, [paragraph]);
 
   return (
-    <ScrollArea h="calc( 100vh - 56px )">
-      <Container my="2rem">
-        <Title mb="xl">{paragraph.title}</Title>
-        <Group position="apart">
-          <Group>
-            <Text c="dimmed"> {dayjs().to(dayjs(paragraph.time))}</Text>
-            <UnstyledButton
-              component="a"
-              href={`/author/${encodeURIComponent(
-                paragraph.author || "unknown"
-              )}`}
-            >
-              <Badge ml="1rem" radius="sm">
-                {paragraph.author}
-              </Badge>
-            </UnstyledButton>
-          </Group>
+    <Container py="2rem">
+      <Title mb="xl">{paragraph.title}</Title>
+      <Group position="apart">
+        <Group>
+          <Text c="dimmed"> {dayjs().to(dayjs(paragraph.time))}</Text>
+          <UnstyledButton
+            component="a"
+            href={`/author/${encodeURIComponent(
+              paragraph.author || "unknown"
+            )}`}
+          >
+            <Badge ml="1rem" radius="sm">
+              {paragraph.author}
+            </Badge>
+          </UnstyledButton>
         </Group>
-        <Group mb="xl">
-          {paragraph.tags?.map((tag) => (
-            <UnstyledButton
-              key={tag}
-              component="a"
-              href={`/tag/${encodeURIComponent(tag)}`}
-            >
-              <Badge fz="xs" variant="dot">
-                {tag}
-              </Badge>
-            </UnstyledButton>
-          ))}
-        </Group>
-        <TypographyStylesProvider>
-          <div
-            className={classes.paragraph}
-            dangerouslySetInnerHTML={{
-              __html: stripStyles(paragraph.content),
-            }}
-          />
-        </TypographyStylesProvider>
-      </Container>
-    </ScrollArea>
+      </Group>
+      <Group mb="xl">
+        {paragraph.tags?.map((tag) => (
+          <UnstyledButton
+            key={tag}
+            component="a"
+            href={`/tag/${encodeURIComponent(tag)}`}
+          >
+            <Badge fz="xs" variant="dot">
+              {tag}
+            </Badge>
+          </UnstyledButton>
+        ))}
+      </Group>
+      <TypographyStylesProvider>
+        <div
+          className={classes.paragraph}
+          dangerouslySetInnerHTML={{
+            __html: stripStyles(paragraph.content),
+          }}
+        />
+      </TypographyStylesProvider>
+    </Container>
   );
 }