Use em for retina display

times-yasunori · Oct 3, 2024 · b81bdb8 · b81bdb8
1 parent c03f6cd
commit b81bdb8
Showing 1 changed file with 2 additions and 1 deletion.
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();