From 771f7f07f46c469b5f3ff95c6d42762cbc007119 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 3 Mar 2026 13:02:08 -0600
Subject: [PATCH] Fix adapter diagnostics text overflow in onboarding and
 config UI

---
 ui/src/components/AgentConfigForm.tsx  | 6 +++---
 ui/src/components/OnboardingWizard.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/AgentConfigForm.tsx b/ui/src/components/AgentConfigForm.tsx
index 688e98cf..2ddc539b 100644
--- a/ui/src/components/AgentConfigForm.tsx
+++ b/ui/src/components/AgentConfigForm.tsx
@@ -800,14 +800,14 @@ function AdapterEnvironmentResult({ result }: { result: AdapterEnvironmentTestRe
       </div>
       <div className="mt-2 space-y-1.5">
         {result.checks.map((check, idx) => (
-          <div key={`${check.code}-${idx}`} className="text-[11px] leading-relaxed">
+          <div key={`${check.code}-${idx}`} className="text-[11px] leading-relaxed break-words">
             <span className="font-medium uppercase tracking-wide opacity-80">
               {check.level}
             </span>
             <span className="mx-1 opacity-60">·</span>
             <span>{check.message}</span>
-            {check.detail && <span className="opacity-75"> ({check.detail})</span>}
-            {check.hint && <span className="opacity-90"> Hint: {check.hint}</span>}
+            {check.detail && <span className="block opacity-75 break-all">({check.detail})</span>}
+            {check.hint && <span className="block opacity-90 break-words">Hint: {check.hint}</span>}
           </div>
         ))}
       </div>
diff --git a/ui/src/components/OnboardingWizard.tsx b/ui/src/components/OnboardingWizard.tsx
index 577e5418..12deaa4b 100644
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -882,14 +882,14 @@ function AdapterEnvironmentResult({ result }: { result: AdapterEnvironmentTestRe
       </div>
       <div className="mt-1.5 space-y-1">
         {result.checks.map((check, idx) => (
-          <div key={`${check.code}-${idx}`} className="leading-relaxed">
+          <div key={`${check.code}-${idx}`} className="leading-relaxed break-words">
             <span className="font-medium uppercase tracking-wide opacity-80">
               {check.level}
             </span>
             <span className="mx-1 opacity-60">·</span>
             <span>{check.message}</span>
-            {check.detail && <span className="opacity-75"> ({check.detail})</span>}
-            {check.hint && <span className="opacity-90"> Hint: {check.hint}</span>}
+            {check.detail && <span className="block opacity-75 break-all">({check.detail})</span>}
+            {check.hint && <span className="block opacity-90 break-words">Hint: {check.hint}</span>}
           </div>
         ))}
       </div>