From d04c2f82846d53ebbcd4505e8ba97161d77a5808 Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Mon, 3 Jun 2024 17:36:48 -0400
Subject: [PATCH 1/2] fix: headless ui styles injection

---
 styles/index.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/styles/index.css b/styles/index.css
index 4f4401699..e4f15463d 100644
--- 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 {
+  overflow: visible !important;
+  padding-right: 0 !important;
+}
+
 /* hide number input arrows */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

From a214041ed45f6316e742bf25468eb67906e6a3f0 Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Mon, 3 Jun 2024 17:50:15 -0400
Subject: [PATCH 2/2] fix: add/remove html dialogue class on dialogue state

---
 components/ui/Modal.tsx | 14 +++++++++++++-
 styles/index.css        |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index 8637b5d84..7ff7d9630 100644
--- 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
index e4f15463d..3e1035874 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -12,7 +12,7 @@ html {
 }
 
 /* prevents styles injected by headless ui */
-html {
+html.dialog-open {
   overflow: visible !important;
   padding-right: 0 !important;
 }