From da917a5bdd381cc47c9885a85418b9a9f10d3389 Mon Sep 17 00:00:00 2001
From: ajkrj <ajkrj@users.noreply.github.com>
Date: Wed, 7 Oct 2026 21:33:27 +0530
Subject: [PATCH] fix(ui): wrap long errors in connection test dialog instead
 of scrolling sideways

A long unbroken token in the provider error stretched the grid-based dialog past its frame. Let the content shrink with min-w-0 and break long words in the error text.
---
 .../src/components/add_model/model_connection_test.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/add_model/model_connection_test.tsx b/ui/litellm-dashboard/src/components/add_model/model_connection_test.tsx
index f6ef86a77ca..52fe964d141 100644
--- a/ui/litellm-dashboard/src/components/add_model/model_connection_test.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/model_connection_test.tsx
@@ -133,7 +133,7 @@ ${formattedBody}
     : "";
 
   return (
-    <div className="rounded-lg bg-background p-6">
+    <div className="min-w-0 rounded-lg bg-background p-6">
       {isLoading ? (
         <div aria-busy="true" className="flex flex-col items-center justify-center gap-4 px-5 py-8 text-center">
           <LoaderCircle className="size-8 animate-spin text-primary" />
@@ -157,7 +157,9 @@ ${formattedBody}
 
           <div className="mb-5 rounded-lg border border-destructive/30 bg-destructive/10 p-4 shadow-xs">
             <p className="mb-2 font-medium">Error:</p>
-            <p className="text-sm leading-relaxed text-destructive">{errorMessage}</p>
+            <p data-testid="connection-error-msg" className="text-sm leading-relaxed break-words text-destructive">
+              {errorMessage}
+            </p>
 
             {error && (
               <Button