Merge pull request #2886 from Harikrishnan1367709/S3-Destinations-Error-message-overflows-#2885

fix(ui): prevent error message overflow in S3 Destinations modal -#2885

apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx

@@ -281,7 +281,7 @@ export const ImpersonationBar = () => {
 								<div className="flex items-center gap-4 flex-1 flex-wrap">
 									<Avatar className="h-10 w-10">
 										<AvatarImage
-                      className="object-cover"
+											className="object-cover"
 											src={data?.user?.image || ""}
 											alt={data?.user?.name || ""}
 										/>

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>
 				)}

apps/dokploy/components/layouts/user-nav.tsx

@@ -44,7 +44,7 @@ export const UserNav = () => {
 				>
 					<Avatar className="h-8 w-8 rounded-lg">
 						<AvatarImage
-              className="object-cover"
+							className="object-cover"
 							src={data?.user?.image || ""}
 							alt={data?.user?.image || ""}
 						/>

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>
 	);
 }