fix: fixed issue where popover menus would open with incorrect positioning on desktop

This commit is contained in:
Mo
2022-12-05 17:34:41 -06:00
parent ccde207de8
commit a66bb08c3b
2 changed files with 14 additions and 8 deletions

View File

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