From 74e17b4de632adfb62c80baff15fc4d6dd6814a3 Mon Sep 17 00:00:00 2001
From: HarikrishnanD <harikrishnan@mulecraft.in>
Date: Fri, 24 Oct 2025 12:04:43 +0530
Subject: [PATCH] fix(ui): prevent error message overflow in S3 Destinations
 modal

---
 .../settings/destination/handle-destinations.tsx     |  2 +-
 apps/dokploy/components/shared/alert-block.tsx       | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
index a0138b3c3..d36d53af2 100644
--- a/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
+++ b/apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx
@@ -217,7 +217,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 				{(isError || isErrorConnection) && (
-					<AlertBlock type="error" className="break-words">
+					<AlertBlock type="error" className="w-full">
 						{connectionError?.message || error?.message}
 					</AlertBlock>
 				)}
diff --git a/apps/dokploy/components/shared/alert-block.tsx b/apps/dokploy/components/shared/alert-block.tsx
index 5a6d411a9..045391b55 100644
--- a/apps/dokploy/components/shared/alert-block.tsx
+++ b/apps/dokploy/components/shared/alert-block.tsx
@@ -39,13 +39,19 @@ export function AlertBlock({
 		<div
 			{...props}
 			className={cn(
-				"flex items-center flex-row gap-4 rounded-lg p-2",
+				"flex items-start flex-row gap-4 rounded-lg p-2",
 				iconClassName,
 				className,
 			)}
 		>
-			{icon || <Icon className="text-current" />}
-			<span className="text-sm text-current">{children}</span>
+			<div className="flex-shrink-0 mt-0.5">
+				{icon || <Icon className="text-current" />}
+			</div>
+			<div className="flex-1 min-w-0">
+				<span className="text-sm text-current break-words overflow-wrap-anywhere whitespace-pre-wrap">
+					{children}
+				</span>
+			</div>
 		</div>
 	);
 }