From f68c52e25513c98548e9937fc3a34486c6abe409 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 16 Mar 2024 09:46:11 -0400
Subject: [PATCH] fix: Mobile media query not working correctly

---
 app/components/MobileScrollWrapper.tsx | 9 ++++++++-
 app/hooks/useMobile.ts                 | 4 +---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/components/MobileScrollWrapper.tsx b/app/components/MobileScrollWrapper.tsx
index 14dbed872..c4864470e 100644
--- a/app/components/MobileScrollWrapper.tsx
+++ b/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;
diff --git a/app/hooks/useMobile.ts b/app/hooks/useMobile.ts
index c25668b49..d703dcdde 100644
--- a/app/hooks/useMobile.ts
+++ b/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)`);
 }