From 0d87de9f8081beaebfe46c054c3446783ae1f8e8 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 4 Apr 2022 21:32:31 -0700
Subject: [PATCH] fix: Hide document popover on mobile

---
 app/components/HoverPreview.tsx | 10 ++++++++--
 app/components/Popover.tsx      |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/HoverPreview.tsx b/app/components/HoverPreview.tsx
index fc9237341..c32ff6bd4 100644
--- a/app/components/HoverPreview.tsx
+++ b/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;
   }
 
diff --git a/app/components/Popover.tsx b/app/components/Popover.tsx
index 2f45b9913..731ad0d1a 100644
--- a/app/components/Popover.tsx
+++ b/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;