fix: Mobile media query not working correctly

app/components/MobileScrollWrapper.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import useMediaQuery from "~/hooks/useMediaQuery";
 import useMobile from "~/hooks/useMobile";
 
 type Props = {
@@ -15,7 +16,13 @@ const MobileWrapper = styled.div`
 
 const MobileScrollWrapper = ({ children }: Props) => {
   const isMobile = useMobile();
-  return isMobile ? <MobileWrapper>{children}</MobileWrapper> : <>{children}</>;
+  const isPrinting = useMediaQuery("print");
+
+  return isMobile && !isPrinting ? (
+    <MobileWrapper>{children}</MobileWrapper>
+  ) : (
+    <>{children}</>
+  );
 };
 
 export default MobileScrollWrapper;

app/hooks/useMobile.ts

@@ -2,7 +2,5 @@ import { breakpoints } from "@shared/styles";
 import useMediaQuery from "~/hooks/useMediaQuery";
 
 export default function useMobile(): boolean {
-  return useMediaQuery(
-    `(max-width: ${breakpoints.tablet - 1}px) and (not print)`
-  );
+  return useMediaQuery(`(max-width: ${breakpoints.tablet - 1}px)`);
 }