fix: fixes issue where add button would not be visible at times on iOS (#2087)

* fix: fixes issue where add button would not be visible at times on iOS

* fix: fixes issue where screens could not be navigated with certain window sizes

packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx

@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
 import { useApplication } from '@/Components/ApplicationProvider'
-import { isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils'
+import { debounce, isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils'
 import { useEffect, useState } from 'react'
 
 export function getIsTabletOrMobileScreen(application: WebApplication) {
@@ -9,6 +9,10 @@ export function getIsTabletOrMobileScreen(application: WebApplication) {
   const isTablet = isTabletScreen() || (isNativeMobile && !isMobileScreen())
   const isMobile = isMobileScreen() || (isNativeMobile && !isTablet)
 
+  if (isTablet && isMobile) {
+    throw Error('isTablet and isMobile cannot both be true')
+  }
+
   return {
     isTabletOrMobile,
     isTablet,
@@ -21,9 +25,9 @@ export default function useIsTabletOrMobileScreen() {
   const application = useApplication()
 
   useEffect(() => {
-    const handleResize = () => {
+    const handleResize = debounce(() => {
       setWindowSize(window.innerWidth)
-    }
+    }, 100)
 
     window.addEventListener('resize', handleResize)
     handleResize()

packages/web/src/javascripts/Hooks/useMediaQuery.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 
 // Follows https://tailwindcss.com/docs/responsive-design
 export const MediaQueryBreakpoints = {
-  sm: '(max-width: 640px)',
-  md: '(min-width: 768px)',
+  sm: '(min-width: 0px) and (max-width: 767px)',
+  md: '(min-width: 768px) and (max-width: 1024px)',
   lg: '(min-width: 1024px)',
   xl: '(min-width: 1280px)',
   '2xl': '(min-width:  1536px)',