Re work modal scrolling

src/app/components/SpaceJoin.svelte

@@ -12,14 +12,20 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import StatusIndicator from "@lib/components/StatusIndicator.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
-  import {attemptRelayAccess, addSpaceMembership, broadcastUserData, setSpaceNotifications} from "@app/core/commands"
+  import {
+    attemptRelayAccess,
+    addSpaceMembership,
+    broadcastUserData,
+    setSpaceNotifications,
+  } from "@app/core/commands"
   import {relaysMostlyRestricted, deriveSpaceMembers, notificationSettings} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -83,45 +89,47 @@
   })
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(join)}>
-  <RelaySummary {url} />
-  <div class="card2 card2-sm bg-alt">
-    <div class="flex justify-between gap-12">
-      <div class="col-1">
-        <strong>Enable notifications for this space</strong>
-        <p class="text-xs opacity-75">
-          Get notified about new activity in this space. You can change this later in settings.
-        </p>
+<Modal tag="form" onsubmit={preventDefault(join)}>
+  <ModalBody>
+    <RelaySummary {url} />
+    <div class="card2 card2-sm bg-alt">
+      <div class="flex justify-between gap-12">
+        <div class="col-1">
+          <strong>Enable notifications for this space</strong>
+          <p class="text-xs opacity-75">
+            Get notified about new activity in this space. You can change this later in settings.
+          </p>
+        </div>
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
       </div>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
     </div>
-  </div>
-  <div class="card2 card2-sm bg-alt flex flex-col gap-2">
-    <div class="flex justify-between">
-      <strong>Connection Status</strong>
+    <div class="card2 card2-sm bg-alt flex flex-col gap-2">
+      <div class="flex justify-between">
+        <strong>Connection Status</strong>
+        {#if error}
+          <StatusIndicator class="bg-error">Error</StatusIndicator>
+        {:else}
+          <SocketStatusIndicator {url} />
+        {/if}
+      </div>
       {#if error}
-        <StatusIndicator class="bg-error">Error</StatusIndicator>
-      {:else}
-        <SocketStatusIndicator {url} />
+        <div class="flex items-center gap-2">
+          <Icon icon={DangerTriangle} />
+          <p class="text-sm opacity-75">{error}</p>
+        </div>
       {/if}
     </div>
-    {#if error}
-      <div class="flex items-center gap-2">
-        <Icon icon={DangerTriangle} />
-        <p class="text-sm opacity-75">{error}</p>
-      </div>
-    {/if}
-  </div>
+  </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner loading={loading}>
+      <Spinner {loading}>
         {error ? "Request Access" : "Join Space"}
       </Spinner>
       <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
-</form>
+</Modal>