fix: Improved mobile styling

fix: Severla context menus miss-positioned
fix: Search filters not large enough on mobile
fix: Deep black background on mobile to match native apps
fix: Sticky document header allowing horizontal scrolling on mobile

app/components/Button.js

@@ -134,7 +134,7 @@ export type Props = {|
   "data-event-action"?: string,
 |};
 
-const Button = React.forwardRef<Props>(
+const Button = React.forwardRef<Props, HTMLButtonElement>(
   (
     {
       type = "text",

app/components/Header.js

@@ -97,6 +97,7 @@ const Wrapper = styled(Flex)`
 `;
 
 const Title = styled("div")`
+  display: none;
   font-size: 16px;
   font-weight: 600;
   text-overflow: ellipsis;
@@ -105,12 +106,9 @@ const Title = styled("div")`
   cursor: pointer;
   min-width: 0;
 
-  /* on mobile, there's always a floating menu button in the top left 
-    add some padding here to offset
-  */
-  padding-left: 40px;
   ${breakpoint("tablet")`	
     padding-left: 0;
+    display: block;
   `};
 
   svg {

app/components/Theme.js

@@ -3,22 +3,30 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import GlobalStyles from "shared/styles/globals";
-import { dark, light } from "shared/styles/theme";
+import { dark, light, lightMobile, darkMobile } from "shared/styles/theme";
+import useMediaQuery from "hooks/useMediaQuery";
 import useStores from "hooks/useStores";
 
+const empty = {};
+
 type Props = {|
   children: React.Node,
 |};
 
 function Theme({ children }: Props) {
   const { ui } = useStores();
+  const theme = ui.resolvedTheme === "dark" ? dark : light;
+  const mobileTheme = ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`);
 
   return (
-    <ThemeProvider theme={ui.resolvedTheme === "dark" ? dark : light}>
-      <>
-        <GlobalStyles />
-        {children}
-      </>
+    <ThemeProvider theme={theme}>
+      <ThemeProvider theme={isMobile ? mobileTheme : empty}>
+        <>
+          <GlobalStyles />
+          {children}
+        </>
+      </ThemeProvider>
     </ThemeProvider>
   );
 }