quickfix: add overflow hidden if search modal open

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;
     }

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 (

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]);
 

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',
                 )}

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,
     ],