From 601982f52bc1e1915ce377712df3a9084930ba5a Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 9 Sep 2024 04:52:12 +0100
Subject: [PATCH] fix: lengthy chat title delete ui issue

---
 src/lib/components/common/ConfirmDialog.svelte | 8 ++++----
 src/lib/components/layout/Sidebar.svelte       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/common/ConfirmDialog.svelte b/src/lib/components/common/ConfirmDialog.svelte
index c0ba3783c..b9e0f87a4 100644
--- a/src/lib/components/common/ConfirmDialog.svelte
+++ b/src/lib/components/common/ConfirmDialog.svelte
@@ -49,20 +49,20 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={modalElement}
-		class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
+		class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[9999] overflow-hidden overscroll-contain"
 		in:fade={{ duration: 10 }}
 		on:mousedown={() => {
 			show = false;
 		}}
 	>
 		<div
-			class=" m-auto rounded-2xl max-w-full w-[32rem] mx-2 bg-gray-50 dark:bg-gray-950 shadow-3xl border border-gray-850"
+			class=" m-auto rounded-2xl max-w-full w-[32rem] mx-2 bg-gray-50 dark:bg-gray-950 max-h-[100dvh] shadow-3xl border border-gray-850"
 			in:flyAndScale
 			on:mousedown={(e) => {
 				e.stopPropagation();
 			}}
 		>
-			<div class="px-[1.75rem] py-6">
+			<div class="px-[1.75rem] py-6 flex flex-col">
 				<div class=" text-lg font-semibold dark:text-gray-200 mb-2.5">
 					{#if title !== ''}
 						{title}
@@ -72,7 +72,7 @@
 				</div>
 
 				<slot>
-					<div class=" text-sm text-gray-500">
+					<div class=" text-sm text-gray-500 flex-1">
 						{#if message !== ''}
 							{message}
 						{:else}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index e78bda96a..49068e48d 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -240,7 +240,7 @@
 		deleteChatHandler(deleteChat.id);
 	}}
 >
-	<div class=" text-sm text-gray-500">
+	<div class=" text-sm text-gray-500 flex-1 line-clamp-3">
 		{$i18n.t('This will delete')} <span class="  font-semibold">{deleteChat.title}</span>.
 	</div>
 </DeleteConfirmDialog>