From 27b1bfbb846848269f0f090a447c4c582f7902ac Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 2 Jan 2024 11:04:39 +1100
Subject: [PATCH] fix modal scroll bug

---
 components/shared/Modal.tsx | 11 ++++++++++-
 styles/globals.css          |  4 ----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx
index cb798133..5f7d1c68 100644
--- a/components/shared/Modal.tsx
+++ b/components/shared/Modal.tsx
@@ -1,6 +1,7 @@
 import { Dialog } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
+import { useEffect } from 'react'
 
 type ModalProps = {
   children: React.ReactNode
@@ -23,6 +24,14 @@ function Modal({
 }: ModalProps) {
   const themeData = mangoStore((s) => s.themeData)
 
+  useEffect(() => {
+    document.documentElement.style.overflow = isOpen ? 'hidden' : 'auto'
+
+    return () => {
+      document.documentElement.style.overflow = 'auto'
+    }
+  }, [isOpen])
+
   const handleClose = () => {
     if (disableOutsideClose) return
     onClose()
@@ -59,7 +68,7 @@ function Modal({
           <div>{children}</div>
           {!hideClose ? (
             <button
-              onClick={onClose}
+              onClick={handleClose}
               className={`absolute right-4 top-4 text-th-fgd-4 focus:outline-none focus-visible:text-th-active sm:right-2 sm:top-2 md:hover:text-th-active`}
             >
               <XMarkIcon className={`h-6 w-6`} />
diff --git a/styles/globals.css b/styles/globals.css
index 47a40ef8..a3fb2cfc 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -424,10 +424,6 @@ th {
 
 /* Base */
 
-html {
-  @apply overflow-auto;
-}
-
 body {
   @apply font-body text-sm font-medium tracking-wider;
   -webkit-font-smoothing: antialiased;