Fix scuffed web styles caused by overlapping viewport breakpoint boundaries (#1985)

* fixed lack of styles on 1300px web viewport width by adjusting tablet breakpoints

* fixed lack of styles on 800px web viewport width by adjusting mobile breakpoints

* changed `maxWidth` values in viewports to `n - 1` format

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>
 )