Re work modal scrolling

src/app/components/ChatEnable.svelte

@@ -7,6 +7,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  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 {PLATFORM_NAME} from "@app/core/state"
@@ -33,23 +35,25 @@
   const back = () => history.back()
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(submit)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Enable Messages</div>
-    {/snippet}
-    {#snippet info()}
-      <div>Do you want to enable direct messages?</div>
-    {/snippet}
-  </ModalHeader>
-  <p>
-    By default, direct messages are disabled, since loading them requires
-    {PLATFORM_NAME} to download and decrypt a lot of data.
-  </p>
-  <p>
-    If you'd like to enable them, please make sure your signer is set up to to auto-approve requests
-    to decrypt data.
-  </p>
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    <ModalHeader>
+      {#snippet title()}
+        <div>Enable Messages</div>
+      {/snippet}
+      {#snippet info()}
+        <div>Do you want to enable direct messages?</div>
+      {/snippet}
+    </ModalHeader>
+    <p>
+      By default, direct messages are disabled, since loading them requires
+      {PLATFORM_NAME} to download and decrypt a lot of data.
+    </p>
+    <p>
+      If you'd like to enable them, please make sure your signer is set up to to auto-approve
+      requests to decrypt data.
+    </p>
+  </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
@@ -60,4 +64,4 @@
       <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
-</form>
+</Modal>