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 ? {children} : <>{children}>;
+ const isPrinting = useMediaQuery("print");
+
+ return isMobile && !isPrinting ? (
+ {children}
+ ) : (
+ <>{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)`);
}