fix: style in mobile

src/helper/hooks.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useOptionsState } from "@/store/module/options";
-import { useDebounceCallback } from "@mantine/hooks";
+import { useDebounceCallback, useMediaQuery } from "@mantine/hooks";
 import { merge } from "lodash";
 import { SearchApi } from "./api";
 
@@ -17,6 +17,7 @@ export function usePaginationData<T>(query: ZincQueryForSDK) {
   const [data, setData] = useState<T[]>([]);
   const [take, _] = useState(parseInt(params.get("size") || "10"));
   const [page, setPage] = useState(parseInt(params.get("page") || "1"));
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   const update = useDebounceCallback(async function update() {
     console.log("query", query, page, take, options);
@@ -60,6 +61,7 @@ export function usePaginationData<T>(query: ZincQueryForSDK) {
     page,
     pagination: (
       <Pagination
+        size={isMobile ? "sm" : "md"}
         total={Math.ceil(total / take)}
         onChange={setPage}
         value={page}

src/layout/MainLayout.tsx

@@ -3,6 +3,7 @@ import {
   AppShell,
   Avatar,
   Button,
+  Center,
   Group,
   Text,
   TextInput,
@@ -17,7 +18,7 @@ import { TitleContext } from "@/component/Header/Header";
 import Loading from "@/page/Loading";
 
 import { useForm } from "@mantine/form";
-import { useHeadroom, useWindowScroll } from "@mantine/hooks";
+import { useHeadroom, useMediaQuery, useWindowScroll } from "@mantine/hooks";
 import { IconArrowUp, IconSearch, IconSettings } from "@tabler/icons-react";
 import { Link } from "react-router-dom";
 
@@ -26,6 +27,7 @@ export default function MainLayout() {
   const pinned = useHeadroom({ fixedAt: 60 });
 
   const [scroll, scrollTo] = useWindowScroll();
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   const navigate = useNavigate();
 
@@ -56,9 +58,11 @@ export default function MainLayout() {
               <Avatar fw={700} component={Link} to="/">
                 DS
               </Avatar>
-              <Text size="lg" fw={700} ml="sm">
+              {!isMobile && (
-                {title}
+                <Text size="lg" fw={700} ml="sm">
-              </Text>
+                  {title}
+                </Text>
+              )}
             </Group>
 
             <Group>
@@ -75,7 +79,9 @@ export default function MainLayout() {
                 />
               </form>
               <UnstyledButton component={Link} to="/settings">
-                <IconSettings />
+                <Center>
+                  <IconSettings />
+                </Center>
               </UnstyledButton>
             </Group>
           </Group>

src/page/Paragraph.tsx

@@ -1,3 +1,4 @@
+import { TitleContext } from "@/component/Header/Header";
 import {
   Badge,
   Container,
@@ -8,6 +9,7 @@ import {
 } from "@mantine/core";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { useContext, useEffect } from "react";
 import { useLoaderData } from "react-router";
 
 import { Link } from "react-router-dom";
@@ -53,8 +55,13 @@ function stripStyles(content: string) {
 dayjs.extend(relativeTime);
 
 export default function ParagraphPage() {
+  const [_title, setTitle] = useContext(TitleContext);
   const paragraph = useLoaderData() as Paragraph;
 
+  useEffect(() => {
+    setTitle(paragraph.title);
+  }, [setTitle, paragraph.title]);
+
   return (
     <Container py="2rem">
       <Title>{paragraph.title}</Title>

src/page/Settings.tsx

@@ -51,6 +51,13 @@ export default function SettingsPage() {
         />
       ),
     },
+    {
+      title: "Made By",
+      description: "Yoshino-s",
+      value: (
+        <a href="https://github.com/yoshino-s">https://github.com/yoshino-s</a>
+      ),
+    },
   ];
 
   return (