fix for ff - modal overlay was making feature disappear

shalanah · Mar 26, 2024 · 2e56f23 · 2e56f23
1 parent d96757b
commit 2e56f23
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 32 deletions.
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/components/about.tsx b/src/components/about.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import Markdown from 'react-markdown';
@@ -52,28 +52,43 @@ const FAQ = [
   ['', 'Copyright 2024. All Rights Reserved - Shalanah Dawson'],
 ];
 
-export const About = ({ button }: { button: React.ReactNode }) => (
-  <Dialog.Root>
-    <Dialog.Trigger asChild>{button}</Dialog.Trigger>
-    <Dialog.Portal>
-      <DialogOverlay />
-      <DialogContent>
-        <Dl>
-          {FAQ.map(([question, answer], i) => (
-            <React.Fragment key={i}>
-              <dt>
-                <Markdown remarkPlugins={[remarkGfm]}>{question}</Markdown>
-              </dt>
-              <dd>
-                <Markdown remarkPlugins={[remarkGfm]}>{answer}</Markdown>
-              </dd>
-            </React.Fragment>
-          ))}
-        </Dl>
-        <DialogClose>
-          <Cross2Icon />
-        </DialogClose>
-      </DialogContent>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
+export const About = ({ button }: { button: React.ReactNode }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <Dialog.Root open={open}>
+      <Dialog.Trigger asChild ref={ref} onClick={() => setOpen(!open)}>
+        {button}
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <DialogOverlay />
+        <DialogContent
+          onEscapeKeyDown={() => setOpen(false)}
+          onPointerDownOutside={(e) => {
+            if (
+              e.target &&
+              (e.target as HTMLElement).closest('button') !== ref.current
+            )
+              setOpen(false);
+          }}
+        >
+          <Dl>
+            {FAQ.map(([question, answer], i) => (
+              <React.Fragment key={i}>
+                <dt>
+                  <Markdown remarkPlugins={[remarkGfm]}>{question}</Markdown>
+                </dt>
+                <dd>
+                  <Markdown remarkPlugins={[remarkGfm]}>{answer}</Markdown>
+                </dd>
+              </React.Fragment>
+            ))}
+          </Dl>
+          <DialogClose onClick={() => setOpen(false)}>
+            <Cross2Icon />
+          </DialogClose>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
diff --git a/src/components/dialogStyles.tsx b/src/components/dialogStyles.tsx
@@ -44,9 +44,14 @@ export const DialogContent = styled(Dialog.Content).attrs((p) => ({
     outline-offset: 2px;
   }
 `;
-export const DialogOverlay = styled(Dialog.Overlay)`
-  background-color: var(--black-a9);
+
+// Issues in FF so using just a normal div
+export const DialogOverlay = styled.div`
   position: fixed;
-  inset: 0;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100dvh;
+  z-index: 3;
 `;
diff --git a/src/components/links.tsx b/src/components/links.tsx
@@ -68,7 +68,6 @@ export const Links = () => {
             <button
               aria-label="Learn more about this site"
               style={{ borderRadius: 8, width: 40, height: 40 }}
-              onPointerUp={(e) => e.stopPropagation()}
             >
               <InfoCircledIcon style={{ width: 30, height: 30 }} />
             </button>