fix: Hide document popover on mobile

app/components/HoverPreview.tsx

@@ -4,8 +4,9 @@ import { Portal } from "react-portal";
 import styled from "styled-components";
 import { depths } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import { isInternalUrl } from "@shared/utils/urls";
+import { isExternalUrl } from "@shared/utils/urls";
 import HoverPreviewDocument from "~/components/HoverPreviewDocument";
+import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { fadeAndSlideDown } from "~/styles/animations";
 
@@ -124,8 +125,13 @@ function HoverPreviewInternal({ node, onClose }: Props) {
 }
 
 function HoverPreview({ node, ...rest }: Props) {
+  const isMobile = useMobile();
+  if (!isMobile) {
+    return null;
+  }
+
   // previews only work for internal doc links for now
-  if (!isInternalUrl(node.href)) {
+  if (isExternalUrl(node.href)) {
     return null;
   }
 

app/components/Popover.tsx

@@ -3,6 +3,7 @@ import { Dialog } from "reakit/Dialog";
 import { Popover as ReakitPopover } from "reakit/Popover";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
@@ -42,7 +43,7 @@ const Contents = styled.div<{ $width?: number }>`
 
   ${breakpoint("mobile", "tablet")`
     position: fixed;
-    z-index: ${(props: any) => props.theme.depths.menu};
+    z-index: ${depths.menu};
 
     // 50 is a magic number that positions us nicely under the top bar
     top: 50px;