use css media queries rather than JS media queries

packages/backend-emulator/package.json

@@ -15,6 +15,6 @@
     "level": "^6.0.1",
     "minimist": "^1.2.5",
     "node-fetch": "^2.6.1",
-    "webpack": "^4.x"
+    "webpack": "4.44.2"
   }
 }

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -31,6 +31,7 @@ export const BreakpointsProvider = (props: { children: React.ReactNode }) => {
     };
 
     updateScreenSize();
+    setImmediate(() => updateScreenSize());
 
     mediaQueries.onDesktop.addEventListener('change', updateScreenSize);
     mediaQueries.onTablet.addEventListener('change', updateScreenSize);

packages/design-system/atoms/quick-nav/QuickNav.styled.ts

@@ -1,6 +1,22 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
-import { palette } from '../colors';
-import { transitions } from '../timings';
+
+export const HideIfSmall = styled.div`
+  display: initial;
+
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+export const HideIfNotSmall = styled.div`
+  display: none;
+
+  ${onSmallScreen(css`
+    display: initial;
+  `)}
+`;
 
 export const NavItem = styled.div<{ selected: boolean }>`
   padding: 7px;
@@ -35,6 +51,7 @@ export const DropdownNavOpener = styled.div`
   cursor: pointer;
   border-radius: 2px;
   transition: background-color ${transitions.actionable}s ease-in-out;
+  width: 98vw;
 
   &:hover {
     background-color: ${palette.taupe300};

packages/design-system/atoms/quick-nav/QuickNav.tsx

@@ -1,6 +1,5 @@
 // thing should be everything visible on desktop/tablet and a popover when small
 
-import { useBreakpointContext } from '@roleypoly/design-system/atoms/breakpoints';
 import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { useState } from 'react';
 import { GoChevronDown } from 'react-icons/go';
@@ -8,6 +7,8 @@ import {
   DropdownNavCurrent,
   DropdownNavIcon,
   DropdownNavOpener,
+  HideIfNotSmall,
+  HideIfSmall,
   NavItem,
 } from './QuickNav.styled';
 
@@ -18,18 +19,17 @@ export type QuickNavProps = {
 };
 
 export const QuickNav = (props: QuickNavProps) => {
-  const breakpoints = useBreakpointContext();
-
-  if (breakpoints.screenSize.onSmallScreen) {
-    return <QuickNavCollapsed {...props} />;
-  }
-
-  return <QuickNavExpanded {...props} />;
+  return (
+    <>
+      <QuickNavExpanded {...props} />
+      <QuickNavCollapsed {...props} />
+    </>
+  );
 };
 
 export const QuickNavExpanded = (props: QuickNavProps) => {
   return (
-    <div>
+    <HideIfSmall>
       {props.navItems.map((navItem) => (
         <NavItem
           onClick={() => props.onNavChange?.(navItem)}
@@ -39,7 +39,7 @@ export const QuickNavExpanded = (props: QuickNavProps) => {
           {navItem}
         </NavItem>
       ))}
-    </div>
+    </HideIfSmall>
   );
 };
 
@@ -47,7 +47,7 @@ export const QuickNavCollapsed = (props: QuickNavProps) => {
   const [popoverState, setPopoverState] = useState(false);
 
   return (
-    <div>
+    <HideIfNotSmall>
       {popoverState ? (
         <Popover
           headContent={<>Server Editor</>}
@@ -80,6 +80,6 @@ export const QuickNavCollapsed = (props: QuickNavProps) => {
           <DropdownNavCurrent>{props.currentNavItem}</DropdownNavCurrent>
         </DropdownNavOpener>
       )}
-    </div>
+    </HideIfNotSmall>
   );
 };