Change from pointer-events to make transparent div not interactive, to invisible and visible everywhere

src/lib/BSlideOverlay.svelte

@@ -15,7 +15,7 @@
 </script>
 
 {#if show}
-  <div class="fixed inset-0 h-screen w-screen z-20 pointer-events-auto flex flex-col justify-end items-center">
+  <div class="visible fixed inset-0 h-screen w-screen z-20 pointer-events-auto flex flex-col justify-end items-center">
     <button type="button" class="bg-base-100/50 w-full grow z-20"
             transition:fade={{duration:200}}
             onclick={closeOverlay}

src/lib/Toaster.svelte

@@ -20,9 +20,9 @@
   export const addToast = helpers.addToast;
 </script>
 
-<div use:portal class="fixed w-screen top-0 z-50 m-4 flex flex-col items-center gap-2 pointer-events-none">
+<div use:portal class="fixed w-screen top-0 z-50 m-4 flex flex-col items-center gap-2 invisible">
   {#each $toasts as { id, data } (id)}
-    <div use:melt={$content(id)} class="pointer-events-auto alert alert-info relative w-[70%]">
+    <div use:melt={$content(id)} class="alert alert-info relative w-[70%] visible">
       <div>
         <h3 use:melt={$title(id)} class="font-bold">
           {data.title}

src/routes/[qrcode]/+layout.svelte

@@ -85,8 +85,8 @@
       </Map>
     {/await}
   </div>
-  <div class="z-20 mt-16 grow pointer-events-none">
+  <div class="z-20 mt-16 grow invisible">
-    <div class="flex justify-center items-center h-full pointer-events-none">
+    <div class="flex justify-center items-center h-full">
       {@render children()}
     </div>
   </div>

src/routes/[qrcode]/+page.svelte

@@ -41,7 +41,7 @@
 
 <div class="grid grid-rows-6 h-full w-full">
   <div class="row-start-5 col-start-1 flex flex-col justify-center items-center">
-    <div class="pointer-events-auto">
+    <div class="visible">
       <button class="btn btn-primary btn-lg uppercase" onclick={() => showOverlay = true}>Attivare la Ricarica</button>
       <button class="btn btn-secondary" onclick={test}>Test</button>
     </div>

src/routes/[qrcode]/forbidden/+page.svelte

@@ -1,4 +1,4 @@
-<div class="pointer-events-auto bg-red-500/50 h-full w-full flex justify-center items-center">
+<div class="visible bg-red-500/50 h-full w-full flex justify-center items-center">
   <div class="card card-border bg-base-100">
     <div class="card-body items-center">
       <h2 class="card-title">Forbidden</h2>

src/routes/[qrcode]/login/+page.svelte

@@ -56,7 +56,7 @@
   const { message, enhance, submitting } = form;
 </script>
 
-<div class="pointer-events-auto bg-gray-300/50 h-full w-full flex justify-center items-center">
+<div class="visible bg-gray-300/50 h-full w-full flex justify-center items-center">
   <div class="card bg-base-100 w-fit shadow-md">
     <form class="card-body" method="POST" use:enhance>
       <h2 class="card-title">Accesso Utente</h2>

src/routes/[qrcode]/status/+page.svelte

@@ -41,7 +41,7 @@
   }
 </script>
 
-<div class="pointer-events-auto bg-green-700/80 h-full w-full flex flex-col justify-center items-center gap-12">
+<div class="visible bg-green-700/80 h-full w-full flex flex-col justify-center items-center gap-12">
   <div>
     <BatteryIcon/>
   </div>