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)`); }