diff options
| -rw-r--r-- | src/lib/hooks/useWebMediaQueries.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/util/layouts/Breakpoints.web.tsx | 6 |
2 files changed, 5 insertions, 5 deletions
diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx index 3f43a0aaf..71a96a89b 100644 --- a/src/lib/hooks/useWebMediaQueries.tsx +++ b/src/lib/hooks/useWebMediaQueries.tsx @@ -3,8 +3,8 @@ import {isNative} from 'platform/detection' export function useWebMediaQueries() { const isDesktop = useMediaQuery({minWidth: 1300}) - const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300}) - const isMobile = useMediaQuery({maxWidth: 800}) + const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300 - 1}) + const isMobile = useMediaQuery({maxWidth: 800 - 1}) const isTabletOrMobile = isMobile || isTablet const isTabletOrDesktop = isDesktop || isTablet if (isNative) { diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx index 5cf73df0c..5106e3e1f 100644 --- a/src/view/com/util/layouts/Breakpoints.web.tsx +++ b/src/view/com/util/layouts/Breakpoints.web.tsx @@ -8,13 +8,13 @@ export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => ( <MediaQuery minWidth={800}>{children}</MediaQuery> ) export const Tablet = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery minWidth={800} maxWidth={1300}> + <MediaQuery minWidth={800} maxWidth={1300 - 1}> {children} </MediaQuery> ) export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery maxWidth={1300}>{children}</MediaQuery> + <MediaQuery maxWidth={1300 - 1}>{children}</MediaQuery> ) export const Mobile = ({children}: React.PropsWithChildren<{}>) => ( - <MediaQuery maxWidth={800}>{children}</MediaQuery> + <MediaQuery maxWidth={800 - 1}>{children}</MediaQuery> ) |