Re work modal scrolling

src/app/components/ProfileEditForm.svelte

@@ -8,6 +8,8 @@
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import InputProfilePicture from "@app/components/InputProfilePicture.svelte"
   import InfoHandle from "@app/components/InfoHandle.svelte"
   import {pushModal} from "@app/util/modal"
@@ -33,91 +35,93 @@
   let file: File | undefined = $state()
 </script>
 
-<form class="col-4" onsubmit={preventDefault(submit)}>
-  {#if isSignup}
-    <div class="grid grid-cols-2">
-      <div class="flex flex-col gap-2">
-        <p class="text-2xl">Create a Profile</p>
-        <p class="text-sm">
-          Give people something to go on — but remember, privacy matters! Be careful about sharing
-          sensitive information.
-        </p>
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    {#if isSignup}
+      <div class="grid grid-cols-2">
+        <div class="flex flex-col gap-2">
+          <p class="text-2xl">Create a Profile</p>
+          <p class="text-sm">
+            Give people something to go on — but remember, privacy matters! Be careful about sharing
+            sensitive information.
+          </p>
+        </div>
+        <div class="flex flex-col items-center justify-center gap-2">
+          <InputProfilePicture bind:file bind:url={values.profile.picture} />
+          <p class="text-xs">Upload an Avatar</p>
+        </div>
       </div>
-      <div class="flex flex-col items-center justify-center gap-2">
+    {:else}
+      <div class="flex items-center justify-center py-4">
         <InputProfilePicture bind:file bind:url={values.profile.picture} />
-        <p class="text-xs">Upload an Avatar</p>
       </div>
-    </div>
-  {:else}
-    <div class="flex items-center justify-center py-4">
-      <InputProfilePicture bind:file bind:url={values.profile.picture} />
-    </div>
-  {/if}
-  <Field>
-    {#snippet label()}
-      <p>Nickname</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon={UserCircle} />
-        <input bind:value={values.profile.name} class="grow" type="text" />
-      </label>
-    {/snippet}
-    {#snippet info()}
-      What would you like people to call you?
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>About You</p>
-    {/snippet}
-    {#snippet input()}
-      <textarea
-        class="textarea textarea-bordered leading-4"
-        rows="5"
-        bind:value={values.profile.about}></textarea>
-    {/snippet}
-    {#snippet info()}
-      Give a brief introduction to why you're here.
-    {/snippet}
-  </Field>
-  {#if !isSignup}
+    {/if}
     <Field>
       {#snippet label()}
-        <p>Nostr Address</p>
+        <p>Nickname</p>
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
-          <Icon icon={MapPoint} />
-          <input bind:value={values.profile.nip05} class="grow" type="text" />
+          <Icon icon={UserCircle} />
+          <input bind:value={values.profile.name} class="grow" type="text" />
         </label>
       {/snippet}
       {#snippet info()}
-        <p>
-          <Button class="link" onclick={() => pushModal(InfoHandle)}
-            >What is a nostr address?</Button>
-        </p>
+        What would you like people to call you?
       {/snippet}
     </Field>
-  {/if}
-  {#if !isSignup}
-    <FieldInline>
+    <Field>
       {#snippet label()}
-        <p>Broadcast Profile</p>
+        <p>About You</p>
       {/snippet}
       {#snippet input()}
-        <input
-          type="checkbox"
-          class="toggle toggle-primary"
-          bind:checked={values.shouldBroadcast} />
+        <textarea
+          class="textarea textarea-bordered leading-4"
+          rows="5"
+          bind:value={values.profile.about}></textarea>
       {/snippet}
       {#snippet info()}
-        <p>
-          If enabled, changes will be published to the broader nostr network in addition to spaces
-          you are a member of.
-        </p>
+        Give a brief introduction to why you're here.
       {/snippet}
-    </FieldInline>
-  {/if}
+    </Field>
+    {#if !isSignup}
+      <Field>
+        {#snippet label()}
+          <p>Nostr Address</p>
+        {/snippet}
+        {#snippet input()}
+          <label class="input input-bordered flex w-full items-center gap-2">
+            <Icon icon={MapPoint} />
+            <input bind:value={values.profile.nip05} class="grow" type="text" />
+          </label>
+        {/snippet}
+        {#snippet info()}
+          <p>
+            <Button class="link" onclick={() => pushModal(InfoHandle)}
+              >What is a nostr address?</Button>
+          </p>
+        {/snippet}
+      </Field>
+    {/if}
+    {#if !isSignup}
+      <FieldInline>
+        {#snippet label()}
+          <p>Broadcast Profile</p>
+        {/snippet}
+        {#snippet input()}
+          <input
+            type="checkbox"
+            class="toggle toggle-primary"
+            bind:checked={values.shouldBroadcast} />
+        {/snippet}
+        {#snippet info()}
+          <p>
+            If enabled, changes will be published to the broader nostr network in addition to spaces
+            you are a member of.
+          </p>
+        {/snippet}
+      </FieldInline>
+    {/if}
+  </ModalBody>
   {@render footer()}
-</form>
+</Modal>