Merge pull request #2437 from zeitgeistpm/similar-markets-fix

Dialogue fix on similar markets
zeitgeistpm · Jun 12, 2024 · 70ba274 · 70ba274
2 parents 8e9a7d6 + a214041
commit 70ba274
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { ReactNode, Fragment } from "react";
+import { ReactNode, Fragment, useEffect } from "react";
 
 const Modal = ({
   open,
@@ -10,6 +10,18 @@ const Modal = ({
   open: boolean;
   onClose: () => void;
 }) => {
+  useEffect(() => {
+    if (typeof window !== undefined) {
+      const htmlElement = document.documentElement;
+
+      if (open) {
+        htmlElement.classList.add("dialog-open");
+      } else {
+        htmlElement.classList.remove("dialog-open");
+      }
+    }
+  }, [open]);
+
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog open={true} onClose={onClose} className="relative z-ztg-50">

diff --git a/styles/index.css b/styles/index.css
@@ -10,6 +10,13 @@ html {
   font-size: 100%;
   -webkit-tap-highlight-color: transparent;
 }
+
+/* prevents styles injected by headless ui */
+html.dialog-open {
+  overflow: visible !important;
+  padding-right: 0 !important;
+}
+
 /* hide number input arrows */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {