Add modal body to some menus

src/app/components/ChatMessageMenuMobile.svelte

@@ -2,17 +2,19 @@
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {makeReaction} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {clip} from "@app/util/toast"
-  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
-  import Reply from "@assets/icons/reply-2.svg?dataurl"
-  import Copy from "@assets/icons/copy.svg?dataurl"
-  import Code2 from "@assets/icons/code-2.svg?dataurl"
 
   type Props = {
     pubkeys: string[]
@@ -45,7 +47,8 @@
   const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
 </script>
 
-<div class="col-2">
+<Modal>
+  <ModalBody>
     <Button class="btn btn-neutral" onclick={showInfo}>
       <Icon size={4} icon={Code2} />
       Message Info
@@ -62,4 +65,5 @@
       <Icon size={4} icon={SmileCircle} />
       Send Reaction
     </Button>
-</div>
+  </ModalBody>
+</Modal>

src/app/components/RoomItemMenuMobile.svelte

@@ -11,6 +11,8 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
@@ -54,7 +56,8 @@
   const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
 </script>
 
-<div class="flex flex-col gap-2">
+<Modal>
+  <ModalBody>
     {#if event.pubkey === $pubkey}
       <Button class="btn btn-neutral text-error" onclick={showDelete}>
         <Icon size={4} icon={TrashBin2} />
@@ -85,4 +88,5 @@
       <Icon size={4} icon={SmileCircle} />
       Send Reaction
     </Button>
-</div>
+  </ModalBody>
+</Modal>

src/lib/components/ModalBody.svelte

@@ -10,6 +10,6 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div class={cx("scroll-container overflow-y-auto min-h-0 flex flex-col gap-4 p-6", props.class)}>
+<div class={cx("scroll-container overflow-y-auto min-h-0 flex flex-col gap-2 p-6", props.class)}>
   {@render children?.()}
 </div>