Re work modal scrolling

src/lib/components/Confirm.svelte

@@ -7,6 +7,8 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
 
   interface Props {
     title?: string
@@ -32,16 +34,18 @@
   const back = () => history.back()
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(tryConfirm)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>{restProps.title || "Are you sure?"}</div>
-    {/snippet}
-    {#snippet info()}
-      <div>{subtitle}</div>
-    {/snippet}
-  </ModalHeader>
-  <p class="text-center">{message}</p>
+<Modal tag="form" onsubmit={preventDefault(tryConfirm)}>
+  <ModalBody>
+    <ModalHeader>
+      {#snippet title()}
+        <div>{restProps.title || "Are you sure?"}</div>
+      {/snippet}
+      {#snippet info()}
+        <div>{subtitle}</div>
+      {/snippet}
+    </ModalHeader>
+    <p class="text-center">{message}</p>
+  </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
@@ -52,4 +56,4 @@
       <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
-</form>
+</Modal>

src/lib/components/Dialog.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
+  import type {Component} from "svelte"
   import cx from "classnames"
+  import {onMount} from "svelte"
   import {noop} from "@welshman/lib"
   import {fade, fly} from "@lib/transition"
 
-  interface Props {
+  type Props = {
     onClose?: any
     fullscreen?: boolean
-    children?: import("svelte").Snippet
+    children: {
+      component: Component<any>
+      props: Record<string, any>
+    }
   }
 
   const {onClose = noop, fullscreen = false, children}: Props = $props()
@@ -21,9 +26,9 @@
   const innerClass = $derived(
     cx(
       "relative text-base-content text-base-content flex-grow pointer-events-auto",
-      "px-4 py-6 rounded-t-box sm:p-6 sm:rounded-box sm:mt-0",
+      "rounded-t-box sm:rounded-box",
       {
-        "bg-alt shadow-m max-h-[90vh] scroll-container overflow-auto": !fullscreen,
+        "bg-alt shadow-m max-h-[90vh] flex flex-col": !fullscreen,
       },
     ),
   )
@@ -39,7 +44,7 @@
   </button>
   <div class={wrapperClass}>
     <div class={innerClass} transition:fly={{duration: 300}}>
-      {@render children?.()}
+      <children.component {...children.props} />
     </div>
   </div>
 </div>

src/lib/components/Drawer.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
+  import type {Component} from "svelte"
   import {fade, translate} from "@lib/transition"
 
-  const {onClose, children} = $props()
+  type Props = {
+    onClose?: any
+    children: {
+      component: Component
+      props: Record<string, any>
+    }
+  }
+
+  const {onClose, children}: Props = $props()
 </script>
 
 <div class="drawer fixed inset-0 z-modal">
@@ -14,6 +23,6 @@
   <div
     class="scroll-container py-sai pr-sair absolute bottom-0 right-0 top-0 w-72 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:translate={{axis: "x", duration: 300}}>
-    {@render children?.()}
+    <children.component {...children.props} />
   </div>
 </div>

src/lib/components/IconPickerButton.svelte

@@ -58,7 +58,12 @@
 </Tippy>
 
 {#if showIconPicker}
-  <Dialog onClose={close}>
-    <IconPicker onSelect={onClick} />
-  </Dialog>
+  <Dialog
+    onClose={close}
+    children={{
+      component: IconPicker,
+      props: {
+        onSelect: onClick,
+      },
+    }} />
 {/if}

src/lib/components/Modal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    tag?: string
+    class?: string
+    children?: Snippet
+    [key: string]: any
+  }
+
+  const {children, tag = "div", ...props}: Props = $props()
+</script>
+
+<svelte:element this={tag} {...props} class={cx("flex flex-col overflow-hidden pb-6", props.class)}>
+  {@render children?.()}
+</svelte:element>

src/lib/components/ModalBody.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    class?: string
+    children?: Snippet
+  }
+
+  const {children, ...props}: Props = $props()
+</script>
+
+<div
+  class={cx("scroll-container overflow-y-auto min-h-0 flex flex-col gap-4 p-6 pb-0", props.class)}>
+  {@render children?.()}
+</div>

src/lib/components/ModalFooter.svelte

@@ -8,6 +8,9 @@
   const {children}: Props = $props()
 </script>
 
-<div class="row-4 mt-4 items-center justify-between">
-  {@render children?.()}
+<div class="h-20 flex-shrink-0"></div>
+<div class="flex absolute bottom-0 left-0 right-0 p-6 pt-2 rounded-b-box bg-base-100">
+  <div class="flex flex-grow gap-4 items-center justify-between">
+    {@render children?.()}
+  </div>
 </div>

src/lib/components/ModalHeader.svelte

@@ -7,7 +7,7 @@
   const {title, info}: Props = $props()
 </script>
 
-<div class="column m-auto max-w-xs gap-2 py-4">
+<div class="flex flex-col m-auto max-w-xs gap-2 py-4">
   <h1 class="heading">{@render title?.()}</h1>
   <p class="text-center text-sm opacity-75">{@render info?.()}</p>
 </div>