Rework modal header structure

src/app/components/CalendarEventEdit.svelte

@@ -2,6 +2,8 @@
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
@@ -24,12 +26,8 @@
 <CalendarEventForm {url} {initialValues}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Edit this Event</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
+      <ModalTitle>Edit this Event</ModalTitle>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>