Tweak modal, reduce storage on mobile

src/lib/components/Dialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {noop} from "@welshman/lib"
   import {fade, fly} from "@lib/transition"
 
@@ -12,7 +13,11 @@
 
   const extraClass = $derived(
     !fullscreen &&
-      "card2 bg-alt max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px] shadow-xl",
+      cx(
+        "bg-alt text-base-content overflow-auto text-base-content shadow-xl",
+        "px-2 py-6 bottom-0 left-0 right-0 top-20 rounded-t-box absolute",
+        "sm:p-6 sm:max-h-[90vh] sm:w-[520px] sm:rounded-box sm:relative sm:top-0",
+      ),
   )
 </script>
 
@@ -23,7 +28,7 @@
     transition:fade={{duration: 300}}
     onclick={onClose}>
   </button>
-  <div class="scroll-container relative {extraClass}" transition:fly={{duration: 300}}>
+  <div class="scroll-container {extraClass}" transition:fly={{duration: 300}}>
     {@render children?.()}
   </div>
 </div>