From 196e8bcfc0e4cf93025a0e6a8e7773e95c056cb7 Mon Sep 17 00:00:00 2001
From: Sebastian Graz <graz@live.se>
Date: Mon, 18 Dec 2023 23:11:54 +0100
Subject: [PATCH] quickfix: add overflow hidden if search modal open

---
 src/app/[spaceId]/globals.css                      | 10 +++++++---
 src/components/Header/HeaderMobileMenu.tsx         |  6 +++---
 src/components/Search/SearchModal.tsx              |  6 ++++++
 src/components/TableOfContents/TableOfContents.tsx |  8 ++++----
 tailwind.config.ts                                 |  3 ++-
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app/[spaceId]/globals.css b/src/app/[spaceId]/globals.css
index 6a06e59e5..c71519c16 100644
--- a/src/app/[spaceId]/globals.css
+++ b/src/app/[spaceId]/globals.css
@@ -11,6 +11,12 @@
         --sky: 187 221 229;
         --periwinkle: 172 198 238;
     }
+    body {
+        @apply text-dark/9 dark:text-light/9;
+    }
+    html {
+        @apply gutter-stable;
+    }
     h1 {
         @apply tracking-[-0.025em] text-dark dark:text-light textwrap-balance;
     }
@@ -21,9 +27,7 @@
     h6 {
         @apply tracking-[-0.0125em] text-dark dark:text-light;
     }
-    body {
-        @apply text-dark/9 dark:text-light/9;
-    }
+
     p {
         @apply leading-relaxed;
     }
diff --git a/src/components/Header/HeaderMobileMenu.tsx b/src/components/Header/HeaderMobileMenu.tsx
index 378312c6c..eec277022 100644
--- a/src/components/Header/HeaderMobileMenu.tsx
+++ b/src/components/Header/HeaderMobileMenu.tsx
@@ -8,10 +8,10 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
     const language = useLanguage();
 
     const toggleNavigation = () => {
-        if (document.body.classList.contains('navigation-visible')) {
-            document.body.classList.remove('navigation-visible');
+        if (document.body.classList.contains('navigation-open')) {
+            document.body.classList.remove('navigation-open');
         } else {
-            document.body.classList.add('navigation-visible');
+            document.body.classList.add('navigation-open');
         }
     };
     return (
diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx
index 255072885..503a64501 100644
--- a/src/components/Search/SearchModal.tsx
+++ b/src/components/Search/SearchModal.tsx
@@ -33,10 +33,16 @@ export function SearchModal(props: SearchModalProps) {
     React.useEffect(() => {
         if (isSearchOpened) {
             document.body.classList.add('search-open');
+            Object.assign(document.body.style, {
+                overflow: 'hidden',
+            });
         }
 
         return () => {
             document.body.classList.remove('search-open');
+            Object.assign(document.body.style, {
+                overflow: 'auto',
+            });
         };
     }, [isSearchOpened]);
 
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
index 33e38cb65..d29a68e84 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents/TableOfContents.tsx
@@ -56,15 +56,15 @@ export function TableOfContents(props: {
                 'shrink-0',
                 'shadow-transparent',
                 'shadow-thinbottom',
-                'navigation-visible:shadow-dark/2',
+                'navigation-open:shadow-dark/2',
                 'z-[1]',
                 'top-0',
                 `h-[100vh]`,
                 'lg:basis-72',
-                'lg:navigation-visible:border-b-0',
+                'lg:navigation-open:border-b-0',
                 'lg:sticky',
                 'dark:bg-dark',
-                'dark:navigation-visible:shadow-light/2',
+                'dark:navigation-open:shadow-light/2',
                 withHeaderOffset ? 'lg:h-[calc(100vh_-_4rem)]' : 'lg:h-[100vh]',
                 withHeaderOffset ? 'lg:top-16' : 'lg:top-0',
                 visibleOnDesktop ? null : 'lg:hidden',
@@ -91,7 +91,7 @@ export function TableOfContents(props: {
                     'dark:[&::-webkit-scrollbar-thumb]:bg-transparent',
                     'dark:group-hover:[&::-webkit-scrollbar]:bg-light/1',
                     'dark:group-hover:[&::-webkit-scrollbar-thumb]:bg-light/3',
-                    'navigation-visible:flex', // can be auto height animated as such https://stackoverflow.com/a/76944290
+                    'navigation-open:flex', // can be auto height animated as such https://stackoverflow.com/a/76944290
                     /*                     header ? 'pt-3' : 'pt-6', */
                     'lg:pb-16',
                 )}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d00a510bc..91e9b01d3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -126,7 +126,8 @@ const config: Config = {
     },
     plugins: [
         plugin(function ({ addVariant }) {
-            addVariant('navigation-visible', 'body.navigation-visible &');
+            addVariant('navigation-open', 'body.navigation-open &');
+            addVariant('search-open', 'body.search-open &');
         }),
         containerQueries,
     ],