fix: make mobile popover dialog styling nice (#3059)

* fix: make mobile popover dialog styling nice
Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/ContextMenu/index.tsx

@@ -132,6 +132,8 @@ export const Position = styled.div`
   position: absolute;
   z-index: ${(props) => props.theme.depths.menu};
 
+  // overrides make mobile-first coding style challenging
+  // so we explicitly define mobile breakpoint here
   ${breakpoint("mobile", "tablet")`
     position: fixed !important;
     transform: none !important;

app/components/Popover.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
+import { Dialog } from "reakit/Dialog";
 import { Popover as ReakitPopover } from "reakit/Popover";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
 type Props = {
@@ -10,14 +13,24 @@ type Props = {
 };
 
 function Popover({ children, width = 380, ...rest }: Props) {
+  const isMobile = useMobile();
+
+  if (isMobile) {
+    return (
+      <Dialog {...rest} modal>
+        <Contents>{children}</Contents>
+      </Dialog>
+    );
+  }
+
   return (
     <ReakitPopover {...rest}>
-      <Contents width={width}>{children}</Contents>
+      <Contents $width={width}>{children}</Contents>
     </ReakitPopover>
   );
 }
 
-const Contents = styled.div<{ width: number }>`
+const Contents = styled.div<{ $width?: number }>`
   animation: ${fadeAndScaleIn} 200ms ease;
   transform-origin: 75% 0;
   background: ${(props) => props.theme.menuBackground};
@@ -25,8 +38,19 @@ const Contents = styled.div<{ width: number }>`
   padding: 12px 24px;
   max-height: 50vh;
   overflow-y: scroll;
-  width: ${(props) => props.width}px;
   box-shadow: ${(props) => props.theme.menuShadow};
+  width: ${(props) => props.$width}px;
+
+  ${breakpoint("mobile", "tablet")`
+    position: fixed;
+    z-index: ${(props: any) => props.theme.depths.menu};
+
+    // 50 is a magic number that positions us nicely under the top bar
+    top: 50px;
+    left: 8px;
+    right: 8px;
+    width: auto;
+  `};
 `;
 
 export default Popover;