Re work modal scrolling

src/app/components/SpaceAuthError.svelte

@@ -8,6 +8,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import {preventDefault} from "@lib/html"
   import {ucFirst} from "@lib/util"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
@@ -37,21 +39,25 @@
   let loading = $state(false)
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(requestAccess)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Access Error</div>
-    {/snippet}
-    {#snippet info()}
-      <div>We couldn't connect you to this space.</div>
-    {/snippet}
-  </ModalHeader>
-  <p>
-    We received an error from the relay indicating you don't have access to {displayRelayUrl(url)}:
-  </p>
-  <p class="bg-alt card2 welshman-content">
-    {@html renderAsHtml(parse({content: ucFirst(error)}))}
-  </p>
+<Modal tag="form" onsubmit={preventDefault(requestAccess)}>
+  <ModalBody>
+    <ModalHeader>
+      {#snippet title()}
+        <div>Access Error</div>
+      {/snippet}
+      {#snippet info()}
+        <div>We couldn't connect you to this space.</div>
+      {/snippet}
+    </ModalHeader>
+    <p>
+      We received an error from the relay indicating you don't have access to {displayRelayUrl(
+        url,
+      )}:
+    </p>
+    <p class="bg-alt card2 welshman-content">
+      {@html renderAsHtml(parse({content: ucFirst(error)}))}
+    </p>
+  </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
@@ -67,4 +73,4 @@
       </Button>
     </div>
   </ModalFooter>
-</form>
+</Modal>