From c03b9509c83e437b72cfd747c73e186253fa0946 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sun, 13 Jul 2025 11:36:10 -0300
Subject: [PATCH] fix(ui): resolve dialog infinite render loops with tall
 content

- Force modal=false on all dialogs to prevent Radix UI render loops
- Add React context to share dialog state between components
- Implement custom overlay with proper click-to-close behavior
- Add body scroll lock tied to dialog open state (prevents stuck scroll)
- Create scrollable content wrapper with overscroll-contain
- Remove complex wheel event handlers that caused tab hangs
- Simplify dialog architecture for better maintainability
---
 apps/dokploy/components/ui/dialog.tsx | 105 ++++++++++++++++++++------
 1 file changed, 83 insertions(+), 22 deletions(-)

diff --git a/apps/dokploy/components/ui/dialog.tsx b/apps/dokploy/components/ui/dialog.tsx
index 37e8f685f..8ed1520ed 100644
--- a/apps/dokploy/components/ui/dialog.tsx
+++ b/apps/dokploy/components/ui/dialog.tsx
@@ -1,10 +1,19 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
-
 import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root;
+const DialogContext = React.createContext<{
+	onOpenChange?: (open: boolean) => void;
+	open?: boolean;
+}>({});
+
+const Dialog = ({ onOpenChange, open, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => (
+	<DialogContext.Provider value={{ onOpenChange, open }}>
+		<DialogPrimitive.Root open={open} onOpenChange={onOpenChange} {...props} modal={false}/>
+	</DialogContext.Provider>
+);
+Dialog.displayName = DialogPrimitive.Root.displayName;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
@@ -30,25 +39,77 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-	<DialogPortal>
-		<DialogOverlay />
-		<DialogPrimitive.Content
-			ref={ref}
-			className={cn(
-				"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 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]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-				className,
-			)}
-			{...props}
-		>
-			<div className="space-y-4 w-full">{children}</div>
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-				<X className="h-4 w-4" />
-				<span className="sr-only">Close</span>
-			</DialogPrimitive.Close>
-		</DialogPrimitive.Content>
-	</DialogPortal>
-));
+>(({ className, children, ...props }, ref) => {
+	const contentRef = React.useRef<HTMLDivElement>(null);
+	const { onOpenChange, open } = React.useContext(DialogContext);
+
+	React.useEffect(() => {
+		if (!open) return; 
+		
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		const body = document.body;
+		const originalPaddingRight = body.style.paddingRight;
+		const originalOverflow = body.style.overflow;
+		
+		body.style.overflow = 'hidden';
+		if (scrollbarWidth > 0) {
+			body.style.paddingRight = `${scrollbarWidth}px`;
+		}
+		
+		return () => {
+			body.style.overflow = originalOverflow;
+			body.style.paddingRight = originalPaddingRight;
+		};
+	}, [open]);
+
+	const handleOverlayClick = React.useCallback((e: React.MouseEvent) => {
+		if (e.target === e.currentTarget && onOpenChange) {
+			onOpenChange(false);
+		}
+	}, [onOpenChange]);
+
+	const hasPaddingOverride = className?.includes("p-0");
+	
+	return (
+		<DialogPortal>
+			<div 
+				className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+				onClick={handleOverlayClick}
+			/>
+			<DialogPrimitive.Content
+				ref={ref}
+				className={cn(
+					"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 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]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+					"flex flex-col max-h-[90vh]",
+					className,
+				)}
+				onPointerDownOutside={(e) => {
+					const originalEvent = e.detail.originalEvent;
+					const target = originalEvent.target as HTMLElement;
+					if (target.closest('[data-radix-popper-content-wrapper]')) {
+						e.preventDefault();
+					}
+				}}
+				{...props}
+			>
+				<div 
+					ref={contentRef}
+					className={cn(
+						"overflow-y-auto overflow-x-hidden flex-1 min-h-0 overscroll-contain",
+						!hasPaddingOverride && "p-6"
+					)}
+				>
+					{children}
+				</div>
+				
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+					<X className="h-4 w-4" />
+					<span className="sr-only">Close</span>
+				</DialogPrimitive.Close>
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -117,4 +178,4 @@ export {
 	DialogFooter,
 	DialogTitle,
 	DialogDescription,
-};
+};
\ No newline at end of file