mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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>
This commit is contained in:
1 parent
646541245d
commit
66d2e0773a
1 file changed
+6
-1
@@ -170,7 +170,12 @@ function IntegrationStatusBanner({
|
|||||||
{status.lastError && (
|
{status.lastError && (
|
||||||
<div className="text-destructive flex items-start gap-1.5">
|
<div className="text-destructive flex items-start gap-1.5">
|
||||||
<AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
<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>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user