From a2f59a5b1bcc047047f6af717f14f9bd5df89fcd Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 8 Dec 2025 09:19:41 -0800
Subject: [PATCH] Fix some modal bugs

---
 .../components/ChatMessageMenuMobile.svelte   | 20 ++++++-------
 src/app/components/RoomItemMenuMobile.svelte  | 22 +++++++--------
 src/lib/components/Dialog.svelte              | 28 +++++++++++++------
 3 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/app/components/ChatMessageMenuMobile.svelte b/src/app/components/ChatMessageMenuMobile.svelte
index 446387e..d4330c8 100644
--- a/src/app/components/ChatMessageMenuMobile.svelte
+++ b/src/app/components/ChatMessageMenuMobile.svelte
@@ -46,20 +46,20 @@
 </script>
 
 <div class="col-2">
-  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon={SmileCircle} />
-    Send Reaction
-  </Button>
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon={Reply} />
-    Send Reply
+  <Button class="btn btn-neutral" onclick={showInfo}>
+    <Icon size={4} icon={Code2} />
+    Message Info
   </Button>
   <Button class="btn btn-neutral w-full" onclick={copyText}>
     <Icon size={4} icon={Copy} />
     Copy Text
   </Button>
-  <Button class="btn btn-neutral" onclick={showInfo}>
-    <Icon size={4} icon={Code2} />
-    Message Details
+  <Button class="btn btn-neutral w-full" onclick={sendReply}>
+    <Icon size={4} icon={Reply} />
+    Send Reply
+  </Button>
+  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
+    <Icon size={4} icon={SmileCircle} />
+    Send Reaction
   </Button>
 </div>
diff --git a/src/app/components/RoomItemMenuMobile.svelte b/src/app/components/RoomItemMenuMobile.svelte
index 64bdb1e..d017ffb 100644
--- a/src/app/components/RoomItemMenuMobile.svelte
+++ b/src/app/components/RoomItemMenuMobile.svelte
@@ -58,12 +58,12 @@
   {#if event.pubkey === $pubkey}
     <Button class="btn btn-neutral text-error" onclick={showDelete}>
       <Icon size={4} icon={TrashBin2} />
-      Delete
+      Delete Message
     </Button>
   {/if}
   <Button class="btn btn-neutral" onclick={showInfo}>
     <Icon size={4} icon={Code2} />
-    Show JSON
+    Message Info
   </Button>
   {#if path}
     <Link class="btn btn-neutral" href={path}>
@@ -71,18 +71,18 @@
       View Details
     </Link>
   {/if}
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon={Reply} />
-    Reply
-  </Button>
-  <Button class="btn btn-neutral w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon={SmileCircle} />
-    React
-  </Button>
   {#if ENABLE_ZAPS}
     <ZapButton replaceState {url} {event} class="btn btn-neutral w-full">
       <Icon size={4} icon={Bolt} />
-      Zap
+      Send Zap
     </ZapButton>
   {/if}
+  <Button class="btn btn-neutral w-full" onclick={sendReply}>
+    <Icon size={4} icon={Reply} />
+    Send Reply
+  </Button>
+  <Button class="btn btn-neutral w-full" onclick={showEmojiPicker}>
+    <Icon size={4} icon={SmileCircle} />
+    Send Reaction
+  </Button>
 </div>
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index 5da773a..e6325da 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -11,13 +11,21 @@
 
   const {onClose = noop, fullscreen = false, children}: Props = $props()
 
-  const extraClass = $derived(
-    !fullscreen &&
-      cx(
-        "bg-alt text-base-content overflow-auto text-base-content shadow-md",
-        "px-4 py-6 bottom-0 left-0 right-0 top-20 rounded-t-box absolute",
-        "sm:p-6 sm:max-h-[90vh] sm:w-[520px] sm:rounded-box sm:relative sm:top-0 sm:relative",
-      ),
+  const wrapperClass = $derived(
+    cx("absolute inset-0 flex sm:relative pointer-events-none", {
+      "items-center justify-center": fullscreen,
+      "items-end sm:w-[520px] sm:items-center": !fullscreen,
+    }),
+  )
+
+  const innerClass = $derived(
+    cx(
+      "relative text-base-content text-base-content flex-grow pointer-events-auto",
+      "px-4 py-6 rounded-t-box sm:p-6 sm:rounded-box sm:mt-0",
+      {
+        "bg-alt shadow-m max-h-[90vh] scroll-container overflow-auto": !fullscreen,
+      },
+    ),
   )
 </script>
 
@@ -28,7 +36,9 @@
     transition:fade={{duration: 300}}
     onclick={onClose}>
   </button>
-  <div class="scroll-container relative {extraClass}" transition:fly={{duration: 300}}>
-    {@render children?.()}
+  <div class={wrapperClass}>
+    <div class={innerClass} transition:fly={{duration: 300}}>
+      {@render children?.()}
+    </div>
   </div>
 </div>