From 66d2e0773ad771038f56e25b3d3fb1099f9bae00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 22:16:07 +0200
Subject: [PATCH] fix(a11y): break long Withings error strings inside status
 banner

Phase D design review HIGH H5: Withings refresh-token failures can
arrive as 250+ char URL-encoded JSON bodies. Without `break-words`
the inline span pushed the parent card past viewport width on mobile,
causing horizontal scroll on the Settings -> Integrations page during
a degraded state. Add `min-w-0 break-words` to the error span so
long error text wraps within the banner.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/settings/integrations-section.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/integrations-section.tsx b/src/components/settings/integrations-section.tsx
index f4aa30f9b..b597e7230 100644
--- a/src/components/settings/integrations-section.tsx
+++ b/src/components/settings/integrations-section.tsx
@@ -170,7 +170,12 @@ function IntegrationStatusBanner({
       {status.lastError && (
         <div className="text-destructive flex items-start gap-1.5">
           <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-          <span data-testid="integration-status-error">{status.lastError}</span>
+          <span
+            className="min-w-0 break-words"
+            data-testid="integration-status-error"
+          >
+            {status.lastError}
+          </span>
         </div>
       )}
     </div>