Improve scrolling, discover page

src/lib/components/Dialog.svelte

@@ -11,7 +11,8 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="relative card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+    class="relative scroll-container card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+
     transition:fly={{duration: 300}}>
     <slot />
   </div>

src/lib/components/Drawer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {fade, slide} from "@lib/transition"
+  import {fade, translate} from "@lib/transition"
 
   export let onClose
 </script>
@@ -10,8 +10,8 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
-    transition:slide={{axis: "x", duration: 300}}>
+    class="scroll-container absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    transition:translate={{axis: "x", duration: 300}}>
     <slot />
   </div>
 </div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-14 sm:pb-0">
+<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-14 sm:pb-0 scroll-container">
   <slot />
 </div>