From 26bf09caf82632452d62a23ed34e310e870724af Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 11 May 2026 18:12:16 -0500
Subject: [PATCH 1/2] fix dialog styling

---
 src/lib/common/modals/DialogModal.svelte               | 10 +++++++---
 src/lib/common/modals/PlainModal.svelte                |  8 ++++++--
 src/lib/common/modals/StateModal.svelte                |  8 ++++++--
 .../chat/[agentId]/[conversationId]/chat-box.svelte    |  5 +++--
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/common/modals/DialogModal.svelte b/src/lib/common/modals/DialogModal.svelte
index 19271895..fd119a5c 100644
--- a/src/lib/common/modals/DialogModal.svelte
+++ b/src/lib/common/modals/DialogModal.svelte
@@ -4,7 +4,7 @@
     let {
         isOpen = false,
         closeable = false,
-        size = 'xl',
+        size = '2xl',
         title = '',
         className = '',
         confirmBtnText = 'Confirm',
@@ -23,7 +23,11 @@
         sm: 'max-w-sm',
         md: 'max-w-md',
         lg: 'max-w-lg',
-        xl: 'max-w-xl'
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl'
     };
 
     /** @param {any} e */
@@ -56,7 +60,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] bg-black/50"
+    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[2%] bg-black/50"
     transition:fade={{ duration: 150 }}
     onclick={handleBackdropClick}
 >
diff --git a/src/lib/common/modals/PlainModal.svelte b/src/lib/common/modals/PlainModal.svelte
index e4a85943..df81a336 100644
--- a/src/lib/common/modals/PlainModal.svelte
+++ b/src/lib/common/modals/PlainModal.svelte
@@ -17,7 +17,11 @@
         sm: 'max-w-sm',
         md: 'max-w-md',
         lg: 'max-w-lg',
-        xl: 'max-w-xl'
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl'
     };
 
     /** @param {MouseEvent} e */
@@ -32,7 +36,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-    class={`fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] bg-black/50 ${containerClasses}`}
+    class={`fixed inset-0 z-[9999] flex items-start justify-center pt-[2%] bg-black/50 ${containerClasses}`}
     transition:fade={{ duration: 150 }}
     onclick={handleBackdropClick}
 >
diff --git a/src/lib/common/modals/StateModal.svelte b/src/lib/common/modals/StateModal.svelte
index 2a28fd77..4a4c5b66 100644
--- a/src/lib/common/modals/StateModal.svelte
+++ b/src/lib/common/modals/StateModal.svelte
@@ -23,7 +23,11 @@
         sm: 'max-w-sm',
         md: 'max-w-md',
         lg: 'max-w-lg',
-        xl: 'max-w-xl'
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl'
     };
 
     /** @type {import('$conversationTypes').UserStateDetailModel} */
@@ -153,7 +157,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] bg-black/50"
+    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[2%] bg-black/50"
     transition:fade={{ duration: 150 }}
     onclick={handleBackdropClick}
 >
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index c3dfead5..f1403de2 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1685,7 +1685,7 @@
 
 <DialogModal
 	title={'Edit user message'}
-	size={'md'}
+	size={'xl'}
 	isOpen={isOpenEditMsgModal}
 	toggleModal={() => toggleEditMsgModal()}
 	confirm={() => confirmEditMsg()}
@@ -1706,7 +1706,7 @@
 
 <DialogModal
 	title={'Send message'}
-	size={'xl'}
+	size={'5xl'}
 	isOpen={isOpenBigMsgModal}
 	toggleModal={() => toggleBigMessageModal()}
 	confirm={() => sendBigMessage()}
@@ -1761,6 +1761,7 @@
 
 <StateModal
 	isOpen={isOpenUserAddStateModal}
+	size={'2xl'}
 	bind:states={userAddStates}
 	requireActiveRounds
 	toggleModal={() => toggleUserAddStateModal()}

From 516198fc6dd80efae432d489d938e21a4d114758 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 11 May 2026 18:12:45 -0500
Subject: [PATCH 2/2] minor change

---
 src/lib/common/modals/DialogModal.svelte | 2 +-
 src/lib/common/modals/PlainModal.svelte  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/common/modals/DialogModal.svelte b/src/lib/common/modals/DialogModal.svelte
index fd119a5c..bb0adb1c 100644
--- a/src/lib/common/modals/DialogModal.svelte
+++ b/src/lib/common/modals/DialogModal.svelte
@@ -4,7 +4,7 @@
     let {
         isOpen = false,
         closeable = false,
-        size = '2xl',
+        size = 'xl',
         title = '',
         className = '',
         confirmBtnText = 'Confirm',
diff --git a/src/lib/common/modals/PlainModal.svelte b/src/lib/common/modals/PlainModal.svelte
index df81a336..ed4eb957 100644
--- a/src/lib/common/modals/PlainModal.svelte
+++ b/src/lib/common/modals/PlainModal.svelte
@@ -3,7 +3,7 @@
 
     let {
         isOpen = false,
-        size = 'lg',
+        size = 'xl',
         title = '',
         containerClasses = '',
         containerStyles = '',