Re work modal scrolling

src/app/components/RelayAdd.svelte

@@ -9,6 +9,8 @@
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import RelayItem from "@app/components/RelayItem.svelte"
 
   interface Props {
@@ -39,28 +41,34 @@
   })
 </script>
 
-<label class="input input-bordered flex w-full items-center gap-2">
-  <Icon icon={Magnifier} />
-  <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
-</label>
-<div class="column -m-6 mt-0 h-[50vh] gap-2 overflow-auto p-6 pt-2" bind:this={element}>
-  {#if customUrl && isShareableRelayUrl(customUrl) && !$relays.includes(normalizeRelayUrl(customUrl))}
-    <RelayItem url={term}>
-      <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(customUrl)}>
-        <Icon icon={AddCircle} />
-        Add Relay
-      </Button>
-    </RelayItem>
-  {/if}
-  {#each $relaySearch
-    .searchValues(term)
-    .filter(url => !$relays.includes(url))
-    .slice(0, limit) as url (url)}
-    <RelayItem {url}>
-      <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
-        <Icon icon={AddCircle} />
-        Add Relay
-      </Button>
-    </RelayItem>
-  {/each}
-</div>
+<Modal>
+  <ModalBody>
+    <label class="input input-bordered flex w-full items-center gap-2">
+      <Icon icon={Magnifier} />
+      <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
+    </label>
+    <div class="column -m-6 mt-0 h-[50vh] gap-2 overflow-auto p-6 pt-2" bind:this={element}>
+      {#if customUrl && isShareableRelayUrl(customUrl) && !$relays.includes(normalizeRelayUrl(customUrl))}
+        <RelayItem url={term}>
+          <Button
+            class="btn btn-outline btn-sm flex items-center"
+            onclick={() => addRelay(customUrl)}>
+            <Icon icon={AddCircle} />
+            Add Relay
+          </Button>
+        </RelayItem>
+      {/if}
+      {#each $relaySearch
+        .searchValues(term)
+        .filter(url => !$relays.includes(url))
+        .slice(0, limit) as url (url)}
+        <RelayItem {url}>
+          <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
+            <Icon icon={AddCircle} />
+            Add Relay
+          </Button>
+        </RelayItem>
+      {/each}
+    </div>
+  </ModalBody>
+</Modal>