fix: do not listen to resize, add gutter for scrolling

green-ecolution · Jun 6, 2024 · 2ed273a · 2ed273a
1 parent 3ae1fc5
commit 2ed273a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
         <meta name="description" content="Die Projektwebsite zum Forschungsprojekt »Green Ecolution« für smartes Grünflächenmanagement der HS Flensburg.">
         <meta name="theme-color" content="#659858">
     </head>
-    <body class="bg-white antialiased font-nunito-sans text-base text-grey-900 w-screen overflow-x-hidden lg:text-lg selection:bg-green-light-900/20 selection:text-grey-900">
+    <body class="bg-white antialiased font-nunito-sans text-base text-grey-900 w-full overflow-x-hidden lg:text-lg selection:bg-green-light-900/20 selection:text-grey-900">
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
     </body>

diff --git a/src/css/components/general.css b/src/css/components/general.css
@@ -1,3 +1,7 @@
+html {
+    scrollbar-gutter: stable;
+}
+
 details > summary {
     @apply list-none;
 }

diff --git a/src/tsx/components/Accordion.tsx b/src/tsx/components/Accordion.tsx
@@ -23,13 +23,6 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
         }
     }, [open]);
 
-    React.useEffect(() => {
-        function handleResize() { setOpen(false) }
-        window.addEventListener('resize', handleResize);
-
-        return () => { window.removeEventListener('resize', handleResize) };
-    }, []);
-
     return (
         <li className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
             <summary