Merge pull request #25 from takeokunn/use-em-for-retina

useMediaQuery の計算に px ではなく em 換算の数値を利用する
times-yasunori · Oct 3, 2024 · 8759b65 · 8759b65
2 parents c03f6cd + bd52cfe
commit 8759b65
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -11,11 +11,13 @@ on:
       - '.github/workflows/deploy.yml'
       - 'yasunori.toml'
       - 'packages/api/**'
+      - 'packages/web/**'
   pull_request:
     paths:
       - '.github/workflows/deploy.yml'
       - 'yasunori.toml'
       - 'packages/api/**'
+      - 'packages/web/**'
     types: [opened, synchronize, reopened, ready_for_review]
 
 jobs:

diff --git a/packages/web/app/root.tsx b/packages/web/app/root.tsx
@@ -17,14 +17,15 @@ import {
   Text,
   Group,
   rem,
+  em,
 } from "@mantine/core";
 import "@mantine/core/styles.css";
 import { useDisclosure, useHeadroom, useMediaQuery } from "@mantine/hooks";
 import { useAwesomeYasunori } from "./hooks/use-awesome-yasunori";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const { data } = useAwesomeYasunori();
-  const isMobile = useMediaQuery("(max-width: 767px)");
+  const isMobile = useMediaQuery(`(max-width: ${em(767)})`);
   const pinned = useHeadroom({ fixedAt: 120 });
   const [opened, { toggle, close }] = useDisclosure();
   const navigate = useNavigate();