fix: Mobile style fixes and improvements (#1459)

* fixes #1457 – check for matchMedia function before using it

* fixes: Depth issues
closes #1458

* fixes: Long breadcrumbs cause horizontal overflow

* fix: Improve tabs and overflow on mobile

app/components/Modal.js

@@ -23,7 +23,7 @@ const GlobalStyles = createGlobalStyle`
   .ReactModal__Overlay {
     background-color: ${(props) =>
       transparentize(0.25, props.theme.background)} !important;
-    z-index: 100;
+    z-index: ${(props) => props.theme.depths.modalOverlay};
   }
 
   ${breakpoint("tablet")`
@@ -103,7 +103,7 @@ const StyledModal = styled(ReactModal)`
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 100;
+  z-index: ${(props) => props.theme.depths.modal};
   display: flex;
   justify-content: center;
   align-items: flex-start;