From a66bb08c3b715f942480c7006fdea213a0bfc956 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 5 Dec 2022 17:34:41 -0600
Subject: [PATCH] fix: fixed issue where popover menus would open with
 incorrect positioning on desktop

---
 .../web/src/javascripts/Hooks/useMediaQuery.tsx     | 13 +++++++++++--
 packages/web/src/javascripts/Utils/Utils.ts         |  9 +++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/javascripts/Hooks/useMediaQuery.tsx b/packages/web/src/javascripts/Hooks/useMediaQuery.tsx
index 9abc9a095..561416c3c 100644
--- a/packages/web/src/javascripts/Hooks/useMediaQuery.tsx
+++ b/packages/web/src/javascripts/Hooks/useMediaQuery.tsx
@@ -2,14 +2,23 @@ import { useEffect, useState } from 'react'
 
 // Follows https://tailwindcss.com/docs/responsive-design
 export const MediaQueryBreakpoints = {
-  sm: '(min-width: 0px) and (max-width: 767px)',
-  md: '(min-width: 768px) and (max-width: 1024px)',
+  sm: '(max-width: 767px)',
+  md: '(min-width: 768px)',
   lg: '(min-width: 1024px)',
   xl: '(min-width: 1280px)',
   '2xl': '(min-width:  1536px)',
   pointerFine: '(pointer: fine)',
 } as const
 
+export const MutuallyExclusiveMediaQueryBreakpoints = {
+  sm: '(min-width: 0px) and (max-width: 767px)',
+  md: '(min-width: 768px) and (max-width: 1023px)',
+  lg: '(min-width: 1024px) and (max-width: 1279px)',
+  xl: '(min-width: 1280px) and (max-width: 1536px)',
+  '2xl': '(min-width:  1536px)',
+  pointerFine: '(pointer: fine)',
+} as const
+
 export const useMediaQuery = (mediaQuery: string) => {
   const [matches, setMatches] = useState(() => window.matchMedia(mediaQuery).matches)
 
diff --git a/packages/web/src/javascripts/Utils/Utils.ts b/packages/web/src/javascripts/Utils/Utils.ts
index dd6b056f7..18856780c 100644
--- a/packages/web/src/javascripts/Utils/Utils.ts
+++ b/packages/web/src/javascripts/Utils/Utils.ts
@@ -1,7 +1,7 @@
 import { DeviceInterface, MobileDeviceInterface, Platform, platformFromString } from '@standardnotes/snjs'
 import { IsDesktopPlatform, IsWebPlatform } from '@/Constants/Version'
 import { EMAIL_REGEX } from '../Constants/Constants'
-import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
+import { MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 declare const process: {
   env: {
@@ -206,12 +206,9 @@ export const disableIosTextFieldZoom = () => {
   }
 }
 
-export const isMobileScreen = () => window.matchMedia(MediaQueryBreakpoints.sm).matches
+export const isMobileScreen = () => window.matchMedia(MutuallyExclusiveMediaQueryBreakpoints.sm).matches
 
-export const isTabletScreen = () =>
-  !isMobileScreen() &&
-  window.matchMedia(MediaQueryBreakpoints.md).matches &&
-  !window.matchMedia(MediaQueryBreakpoints.lg).matches
+export const isTabletScreen = () => window.matchMedia(MutuallyExclusiveMediaQueryBreakpoints.md).matches
 
 export const isTabletOrMobileScreen = () => isMobileScreen() || isTabletScreen()