yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Mobile media query not working correctly

Browse Source
This commit is contained in:
Tom Moor
2024-03-16 09:46:11 -04:00
parent 34c2c5fd51
commit f68c52e255
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/MobileScrollWrapper.tsx
View File

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

4
app/hooks/useMobile.ts
View File

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