From 3b18e5c8ecb665a5d27d3d64724074f9e63220d8 Mon Sep 17 00:00:00 2001
From: Luis Novo <lfnovo@gmail.com>
Date: Mon, 16 Feb 2026 14:46:48 -0300
Subject: [PATCH] fix: prevent dialog content overflow with long unbroken
 strings

Long strings without spaces caused the Add Source dialog to expand
beyond the viewport due to field-sizing-content on textareas
propagating width through CSS grid/flex layout.

Add min-w-0 to Textarea, WizardContainer content layers, and the
AddSourceDialog form to prevent flex/grid items from expanding to
fit content. Add overflow-hidden to base DialogContent as a safeguard.
---
 frontend/src/components/sources/AddSourceDialog.tsx |  2 +-
 frontend/src/components/ui/dialog.tsx               |  2 +-
 frontend/src/components/ui/textarea.tsx             |  2 +-
 frontend/src/components/ui/wizard-container.tsx     | 10 +++++-----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/sources/AddSourceDialog.tsx b/frontend/src/components/sources/AddSourceDialog.tsx
index a49b2d4..3f31adb 100644
--- a/frontend/src/components/sources/AddSourceDialog.tsx
+++ b/frontend/src/components/sources/AddSourceDialog.tsx
@@ -542,7 +542,7 @@ export function AddSourceDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={handleSubmit(onSubmit)} className="min-w-0">
           <WizardContainer
             currentStep={currentStep}
             steps={WIZARD_STEPS}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index eb82979..14bfaa7 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -63,7 +63,7 @@ const DialogContent = ({
         data-slot="dialog-content"
         aria-describedby={undefined}
         className={cn(
-            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[calc(100%-2rem)]",
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[calc(100%-2rem)] overflow-hidden",
           className
         )}
         {...props}
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index 7f21b5e..8a4d5d3 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 min-w-0 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
diff --git a/frontend/src/components/ui/wizard-container.tsx b/frontend/src/components/ui/wizard-container.tsx
index 6f85479..c39e5cc 100644
--- a/frontend/src/components/ui/wizard-container.tsx
+++ b/frontend/src/components/ui/wizard-container.tsx
@@ -85,15 +85,15 @@ export function WizardContainer({
   className
 }: WizardContainerProps) {
   return (
-    <div className={cn('flex flex-col h-[500px] bg-card rounded-lg border border-border', className)}>
-      <StepIndicator 
+    <div className={cn('flex flex-col h-[500px] min-w-0 overflow-hidden bg-card rounded-lg border border-border', className)}>
+      <StepIndicator
         currentStep={currentStep}
         steps={steps}
         onStepClick={onStepClick}
       />
-      
-      <div className="flex-1 overflow-hidden">
-        <div className="h-full overflow-y-auto px-6 py-4">
+
+      <div className="flex-1 min-w-0 overflow-hidden">
+        <div className="h-full min-w-0 overflow-y-auto px-6 py-4">
           {children}
         </div>
       </div>