From 184e29a605c56cbf7015508da4b5f6cb17fe0da8 Mon Sep 17 00:00:00 2001
From: Tofik Hasanov <72318342+tofikwest@users.noreply.github.com>
Date: Thu, 12 Mar 2026 16:02:40 -0400
Subject: [PATCH] fix(app): prevent integration dialog content from overflowing
 modal (#2292)

Long setup instructions (curl commands) and help text were escaping the
dialog bounds. Add word-breaking, overflow control, and scrollable body.
---
 .../integrations/ConnectIntegrationDialog.tsx          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/integrations/ConnectIntegrationDialog.tsx b/apps/app/src/components/integrations/ConnectIntegrationDialog.tsx
index f04b146fd..a6d28f972 100644
--- a/apps/app/src/components/integrations/ConnectIntegrationDialog.tsx
+++ b/apps/app/src/components/integrations/ConnectIntegrationDialog.tsx
@@ -651,8 +651,8 @@ export function ConnectIntegrationDialog({
               </Button>
             )}
             {provider?.setupInstructions && (
-              <div className="text-sm text-muted-foreground bg-muted/50 p-3 rounded-md max-h-32 overflow-y-auto">
-                <p className="whitespace-pre-wrap text-xs">{provider.setupInstructions}</p>
+              <div className="text-sm text-muted-foreground bg-muted/50 p-3 rounded-md max-h-32 overflow-y-auto overflow-x-hidden">
+                <p className="whitespace-pre-wrap text-xs break-words">{provider.setupInstructions}</p>
               </div>
             )}
             {provider?.category === 'Cloud' && (
@@ -672,7 +672,7 @@ export function ConnectIntegrationDialog({
                   onChange={(value) => updateCredential(field.id, value)}
                 />
                 {field.helpText && (
-                  <p className="text-xs text-muted-foreground">{field.helpText}</p>
+                  <p className="text-xs text-muted-foreground break-words">{field.helpText}</p>
                 )}
                 {errors[field.id] && <p className="text-xs text-destructive">{errors[field.id]}</p>}
               </div>
@@ -751,7 +751,7 @@ export function ConnectIntegrationDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md overflow-hidden">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-lg bg-background border border-border flex items-center justify-center overflow-hidden">
@@ -768,7 +768,7 @@ export function ConnectIntegrationDialog({
           <DialogDescription>{getDialogDescription()}</DialogDescription>
         </DialogHeader>
 
-        <div className="pt-2">
+        <div className="pt-2 max-h-[60vh] overflow-y-auto">
           {isDataLoading ? (
             <div className="flex items-center justify-center py-8">
               <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />