Merge pull request #2182 from jhon2c/fix/dialog-crash

fix(ui):  Fix Dialogs Infinite Render Loops and Command Component Conflicts

apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -270,8 +270,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-5xl p-0">
-				<DialogHeader className="p-6">
+			<DialogContent className="sm:max-w-5xl p-0">
+				<DialogHeader>
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
 						Update certain settings using a json object.
@@ -753,7 +753,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							)}
 						/>
 
-						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border p-2 ">
+						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border">
 							<Button
 								isLoading={isLoading}
 								form="hook-form-add-permissions"

apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx

@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
 								</Button>
 							</div>
 							<Dialog open={showModal} onOpenChange={setShowModal}>
-								<DialogContent className="max-h-[80vh] max-w-[50vw] overflow-y-auto">
+								<DialogContent className="max-w-[50vw]">
 									<DialogHeader>
 										<DialogTitle className="text-2xl font-bold">
 											Template Information

apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx

@@ -124,7 +124,7 @@ export const HandlePorts = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Ports</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/application/advanced/redirects/handle-redirect.tsx

@@ -179,7 +179,7 @@ export const HandleRedirect = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Redirects</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx

@@ -114,7 +114,7 @@ export const HandleSecurity = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx

@@ -48,7 +48,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 relative">
-						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
+						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem]">
 							<CodeEditor
 								lineWrapping
 								value={data || "Empty"}

apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>

apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx

@@ -151,7 +151,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>

apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx

@@ -186,7 +186,7 @@ export const UpdateVolume = ({
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -124,7 +124,7 @@ export const ShowDeployment = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription className="flex items-center gap-2">
@@ -158,7 +158,7 @@ export const ShowDeployment = ({
 				<div
 					ref={scrollRef}
 					onScroll={handleScroll}
-					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					className="h-[720px] space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 				>
 					{" "}
 					{filteredLogs.length > 0 ? (

apps/dokploy/components/dashboard/application/deployments/show-deployments-modal.tsx

@@ -50,7 +50,7 @@ export const ShowDeploymentsModal = ({
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl p-0">
+			<DialogContent className="sm:max-w-5xl p-0">
 				<ShowDeployments
 					id={id}
 					type={type}

apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx

@@ -33,7 +33,7 @@ export const DnsHelperModal = ({ domain, serverIp }: Props) => {
 					<HelpCircle className="size-4" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						<Server className="size-5" />

apps/dokploy/components/dashboard/application/domains/handle-domain.tsx

@@ -292,7 +292,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>

apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx

@@ -138,7 +138,7 @@ export const AddPreviewDomain = ({
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx

@@ -138,7 +138,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 						Configure
 					</Button>
 				</DialogTrigger>
-				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
+				<DialogContent className="sm:max-w-5xl w-full">
 					<DialogHeader>
 						<DialogTitle>Preview Deployment Settings</DialogTitle>
 						<DialogDescription>

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
+	DialogDescription,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
@@ -232,14 +233,17 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 			</DialogTrigger>
 			<DialogContent
 				className={cn(
-					"max-h-screen overflow-y-auto",
 					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
-						? "max-h-[95vh] sm:max-w-2xl"
-						: " sm:max-w-lg",
+						? "sm:max-w-2xl"
+						: "sm:max-w-lg",
 				)}
 			>
 				<DialogHeader>
 					<DialogTitle>{scheduleId ? "Edit" : "Create"} Schedule</DialogTitle>
+					<DialogDescription>
+						{scheduleId ? "Manage" : "Create"} a schedule to run a task at a
+						specific time or interval.
+					</DialogDescription>
 				</DialogHeader>
 				<Form {...form}>
 					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx

@@ -91,7 +91,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 							return (
 								<div
 									key={schedule.scheduleId}
-									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">

apps/dokploy/components/dashboard/application/update-application.tsx

@@ -99,7 +99,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Application</DialogTitle>
 					<DialogDescription>Update the application data</DialogDescription>

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -257,7 +257,7 @@ export const HandleVolumeBackups = ({
 			</DialogTrigger>
 			<DialogContent
 				className={cn(
-					"max-h-screen overflow-y-auto",
+					"overflow-y-auto",
 					volumeBackupType === "compose" || volumeBackupType === "application"
 						? "max-h-[95vh] sm:max-w-2xl"
 						: " sm:max-w-lg",

apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx

@@ -161,7 +161,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 					Restore Volume Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -113,7 +113,7 @@ export const ShowVolumeBackups = ({
 							return (
 								<div
 									key={volumeBackup.volumeBackupId}
-									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">

apps/dokploy/components/dashboard/compose/delete-service.tsx

@@ -126,7 +126,7 @@ export const DeleteService = ({ id, type }: Props) => {
 					<Trash2 className="size-4 text-primary group-hover:text-red-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Are you absolutely sure?</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					Preview Compose
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
+			<DialogContent className="sm:max-w-6xl max-h-[50rem]">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/compose/general/show-utilities.tsx

@@ -23,7 +23,7 @@ export const ShowUtilities = ({ composeId }: Props) => {
 			<DialogTrigger asChild>
 				<Button variant="ghost">Show Utilities</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
+			<DialogContent className="sm:max-w-5xl">
 				<DialogHeader>
 					<DialogTitle>Utilities </DialogTitle>
 					<DialogDescription>Modify the application data</DialogDescription>

apps/dokploy/components/dashboard/compose/update-compose.tsx

@@ -99,7 +99,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Compose</DialogTitle>
 					<DialogDescription>Update the compose data</DialogDescription>

apps/dokploy/components/dashboard/database/backups/handle-backup.tsx

@@ -329,7 +329,7 @@ export const HandleBackup = ({
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>
 						{backupId ? "Update Backup" : "Create Backup"}

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -324,7 +324,7 @@ export const RestoreBackup = ({
 					Restore Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />

apps/dokploy/components/dashboard/docker/config/show-container-config.tsx

@@ -42,7 +42,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 						See in detail the config of this container
 					</DialogDescription>
 				</DialogHeader>
-				<div className="text-wrap rounded-lg border p-4 text-sm bg-card overflow-y-auto max-h-[80vh]">
+				<div className="text-wrap rounded-lg border p-4 text-sm bg-card max-h-[80vh]">
 					<code>
 						<pre className="whitespace-pre-wrap break-words">
 							<CodeEditor

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -274,7 +274,7 @@ export const DockerLogsId: React.FC<Props> = ({
 					<div
 						ref={scrollRef}
 						onScroll={handleScroll}
-						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+						className="h-[720px] space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 					>
 						{filteredLogs.length > 0 ? (
 							filteredLogs.map((filteredLog: LogLine, index: number) => (

apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx

@@ -138,7 +138,7 @@ export function LineCountFilter({
 							}}
 						/>
 					</div>
-					<CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+					<CommandPrimitive.List className="max-h-[300px] overflow-x-hidden">
 						<CommandPrimitive.Group className="px-2 py-1.5">
 							{lineCountOptions.map((option) => {
 								const isSelected = value === option.value;

apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx

@@ -40,7 +40,7 @@ export const ShowDockerModalLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>

apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx

@@ -40,7 +40,7 @@ export const ShowDockerModalStackLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>

apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx

@@ -60,7 +60,7 @@ export const DockerTerminalModal = ({
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				className="max-h-screen  overflow-y-auto sm:max-w-7xl"
+				className="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>

apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx

@@ -97,7 +97,7 @@ export const UpdateMariadb = ({ mariadbId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify MariaDB</DialogTitle>
 					<DialogDescription>Update the MariaDB data</DialogDescription>

apps/dokploy/components/dashboard/mongo/update-mongo.tsx

@@ -99,7 +99,7 @@ export const UpdateMongo = ({ mongoId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify MongoDB</DialogTitle>
 					<DialogDescription>Update the MongoDB data</DialogDescription>

apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx

@@ -123,7 +123,7 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
 							? queryError.message
 							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
 					</p>
-					<p className=" text-sm text-muted-foreground">URL: {baseUrl}</p>
+					<p className="text-sm text-muted-foreground">URL: {baseUrl}</p>
 				</div>
 			</div>
 		);

apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx

@@ -143,7 +143,7 @@ export const ShowPaidMonitoring = ({
 							? queryError.message
 							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
 					</p>
-					<p className=" text-sm text-muted-foreground">URL: {BASE_URL}</p>
+					<p className="text-sm text-muted-foreground">URL: {BASE_URL}</p>
 				</div>
 			</div>
 		);

apps/dokploy/components/dashboard/mysql/update-mysql.tsx

@@ -97,7 +97,7 @@ export const UpdateMysql = ({ mysqlId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify MySQL</DialogTitle>
 					<DialogDescription>Update the MySQL data</DialogDescription>

apps/dokploy/components/dashboard/organization/handle-organization.tsx

@@ -155,7 +155,7 @@ export function AddOrganization({ organizationId }: Props) {
 							control={form.control}
 							name="logo"
 							render={({ field }) => (
-								<FormItem className=" gap-4">
+								<FormItem className="gap-4">
 									<FormLabel className="text-right">Logo URL</FormLabel>
 									<FormControl>
 										<Input
@@ -169,7 +169,7 @@ export function AddOrganization({ organizationId }: Props) {
 								</FormItem>
 							)}
 						/>
-						<DialogFooter className="mt-4">
+						<DialogFooter>
 							<Button type="submit" isLoading={isLoading}>
 								{organizationId ? "Update organization" : "Create organization"}
 							</Button>

apps/dokploy/components/dashboard/postgres/update-postgres.tsx

@@ -99,7 +99,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 					<PenBox className="size-3.5 text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Postgres</DialogTitle>
 					<DialogDescription>Update the Postgres data</DialogDescription>

apps/dokploy/components/dashboard/project/add-application.tsx

@@ -119,7 +119,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 					<span>Application</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Create</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/project/add-compose.tsx

@@ -124,7 +124,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 					<span>Compose</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-xl">
+			<DialogContent className="sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>Create Compose</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/project/add-database.tsx

@@ -283,7 +283,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 					<span>Database</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen md:max-h-[90vh]  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Databases</DialogTitle>
 				</DialogHeader>

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -148,7 +148,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 					<span>Template</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen sm:max-w-[90vw] p-0">
+			<DialogContent className="sm:max-w-[90vw] p-0">
 				<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
 					<div className="flex flex-col space-y-6">
 						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">

apps/dokploy/components/dashboard/project/ai/step-two.tsx

@@ -259,7 +259,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="description">
 										<AccordionTrigger>Description</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea className=" w-full rounded-md border p-4">
+											<ScrollArea className="w-full rounded-md border p-4">
 												<ReactMarkdown className="text-muted-foreground text-sm">
 													{selectedVariant?.description}
 												</ReactMarkdown>
@@ -289,7 +289,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="env-variables">
 										<AccordionTrigger>Environment Variables</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea className=" w-full rounded-md border">
+											<ScrollArea className="w-full rounded-md border">
 												<div className="p-4 space-y-4">
 													{selectedVariant?.envVariables.map((env, index) => (
 														<div
@@ -364,7 +364,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 									<AccordionItem value="domains">
 										<AccordionTrigger>Domains</AccordionTrigger>
 										<AccordionContent>
-											<ScrollArea className=" w-full rounded-md border">
+											<ScrollArea className="w-full rounded-md border">
 												<div className="p-4 space-y-4">
 													{selectedVariant?.domains.map((domain, index) => (
 														<div

apps/dokploy/components/dashboard/project/ai/template-generator.tsx

@@ -158,7 +158,7 @@ export const TemplateGenerator = ({ projectId }: Props) => {
 					<span>AI Assistant</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl w-full  flex flex-col">
+			<DialogContent className="sm:max-w-4xl w-full  flex flex-col">
 				<DialogHeader>
 					<DialogTitle>AI Assistant</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/project/duplicate-project.tsx

@@ -167,7 +167,7 @@ export const DuplicateProject = ({
 
 					<div className="grid gap-2">
 						<Label>Selected services to duplicate</Label>
-						<div className="space-y-2 max-h-[200px] overflow-y-auto border rounded-md p-4">
+						<div className="space-y-2 max-h-[200px] border rounded-md p-4">
 							{selectedServices.map((service) => (
 								<div key={service.id} className="flex items-center space-x-2">
 									<span className="text-sm">

apps/dokploy/components/dashboard/projects/project-environment.tsx

@@ -94,7 +94,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 					</DropdownMenuItem>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl">
+			<DialogContent className="sm:max-w-6xl">
 				<DialogHeader>
 					<DialogTitle>Project Environment</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/projects/show.tsx

@@ -157,7 +157,7 @@ export const ShowProjects = () => {
 																		</Button>
 																	</DropdownMenuTrigger>
 																	<DropdownMenuContent
-																		className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]"
+																		className="w-[200px] space-y-2 max-h-[400px]"
 																		onClick={(e) => e.stopPropagation()}
 																	>
 																		{project.applications.length > 0 && (
@@ -265,7 +265,7 @@ export const ShowProjects = () => {
 																				</Button>
 																			</DropdownMenuTrigger>
 																			<DropdownMenuContent
-																				className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]"
+																				className="w-[200px] space-y-2 max-h-[280px]"
 																				onClick={(e) => e.stopPropagation()}
 																			>
 																				<DropdownMenuLabel className="font-normal">

apps/dokploy/components/dashboard/redis/update-redis.tsx

@@ -97,7 +97,7 @@ export const UpdateRedis = ({ redisId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Redis</DialogTitle>
 					<DialogDescription>Update the redis data</DialogDescription>

apps/dokploy/components/dashboard/requests/columns.tsx

@@ -47,7 +47,7 @@ export const columns: ColumnDef<LogEntry>[] = [
 		cell: ({ row }) => {
 			const log = row.original;
 			return (
-				<div className=" flex flex-col gap-2">
+				<div className="flex flex-col gap-2">
 					<div className="flex items-center flex-row gap-3 ">
 						{log.RequestMethod}{" "}
 						<div className="inline-flex items-center gap-2 bg-muted px-1.5 py-1 rounded-lg">
@@ -86,7 +86,7 @@ export const columns: ColumnDef<LogEntry>[] = [
 		cell: ({ row }) => {
 			const log = row.original;
 			return (
-				<div className=" flex flex-col gap-2">
+				<div className="flex flex-col gap-2">
 					<div className="flex flex-row gap-3 w-full">
 						{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
 					</div>

apps/dokploy/components/dashboard/settings/api/add-api-key.tsx

@@ -142,7 +142,7 @@ export const AddApiKey = () => {
 				<DialogTrigger asChild>
 					<Button>Generate New Key</Button>
 				</DialogTrigger>
-				<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
+				<DialogContent className="sm:max-w-xl max-h-[90vh]">
 					<DialogHeader>
 						<DialogTitle>Generate API Key</DialogTitle>
 						<DialogDescription>

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -171,7 +171,7 @@ export const ShowBilling = () => {
 													)}
 													{isAnnual ? (
 														<div className="flex flex-row gap-2 items-center">
-															<p className=" text-2xl font-semibold tracking-tight text-primary ">
+															<p className="text-2xl font-semibold tracking-tight text-primary ">
 																${" "}
 																{calculatePrice(
 																	serverQuantity,
@@ -180,7 +180,7 @@ export const ShowBilling = () => {
 																USD
 															</p>
 															|
-															<p className=" text-base font-semibold tracking-tight text-muted-foreground">
+															<p className="text-base font-semibold tracking-tight text-muted-foreground">
 																${" "}
 																{(
 																	calculatePrice(serverQuantity, isAnnual) / 12
@@ -189,7 +189,7 @@ export const ShowBilling = () => {
 															</p>
 														</div>
 													) : (
-														<p className=" text-2xl font-semibold tracking-tight text-primary ">
+														<p className="text-2xl font-semibold tracking-tight text-primary ">
 															${" "}
 															{calculatePrice(serverQuantity, isAnnual).toFixed(
 																2,

apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx

@@ -41,7 +41,7 @@ export const ShowWelcomeDokploy = () => {
 	return (
 		<>
 			<Dialog open={open} onOpenChange={handleClose}>
-				<DialogContent className="sm:max-w-xl max-h-screen overflow-y-auto">
+				<DialogContent className="sm:max-w-xl">
 					<DialogHeader>
 						<DialogTitle className="text-2xl font-semibold text-center">
 							Welcome to Dokploy Cloud 🎉

apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx

@@ -106,7 +106,7 @@ export const AddCertificate = () => {
 					Add Certificate
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add New Certificate</DialogTitle>
 					<DialogDescription>
@@ -222,7 +222,7 @@ export const AddCertificate = () => {
 						/>
 					</form>
 
-					<DialogFooter className="flex w-full flex-row !justify-end pt-3">
+					<DialogFooter className="flex w-full flex-row !justify-end">
 						<Button
 							isLoading={isLoading}
 							form="hook-form-add-certificate"

apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx

@@ -27,7 +27,7 @@ export const AddNode = ({ serverId }: Props) => {
 					Add Node
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Add Node</DialogTitle>
 					<DialogDescription className="flex flex-col gap-2">

apps/dokploy/components/dashboard/settings/cluster/nodes/show-node-data.tsx

@@ -24,7 +24,7 @@ export const ShowNodeData = ({ data }: Props) => {
 					View Config
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Node Config</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx

@@ -20,7 +20,7 @@ export const ShowNodesModal = ({ serverId }: Props) => {
 					Show Swarm Nodes
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="min-w-[70vw] overflow-y-auto max-h-screen">
+			<DialogContent className="min-w-[70vw]">
 				<div className="grid w-full gap-1">
 					<ShowNodes serverId={serverId} />
 				</div>

apps/dokploy/components/dashboard/settings/cluster/registry/handle-registry.tsx

@@ -161,7 +161,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add a external registry</DialogTitle>
 					<DialogDescription>
@@ -316,7 +316,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
 							/>
 						</div>
 
-						<DialogFooter className="flex flex-col w-full sm:justify-between gap-4 flex-wrap sm:flex-col col-span-2 mt-6">
+						<DialogFooter className="flex flex-col w-full sm:justify-between gap-4 flex-wrap sm:flex-col col-span-2">
 							<div className="flex flex-row gap-2 justify-between">
 								<Button
 									type="button"

apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx

@@ -204,7 +204,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>
 						{destinationId ? "Update" : "Add"} Destination
@@ -359,7 +359,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 					<DialogFooter
 						className={cn(
 							isCloud ? "!flex-col" : "flex-row",
-							"flex w-full  !justify-between pt-3 gap-4",
+							"flex w-full  !justify-between gap-4",
 						)}
 					>
 						{isCloud ? (

apps/dokploy/components/dashboard/settings/git/bitbucket/add-bitbucket-provider.tsx

@@ -97,7 +97,7 @@ export const AddBitbucketProvider = () => {
 					<span>Bitbucket</span>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Bitbucket Provider <BitbucketIcon className="size-5" />

apps/dokploy/components/dashboard/settings/git/bitbucket/edit-bitbucket-provider.tsx

@@ -105,7 +105,7 @@ export const EditBitbucketProvider = ({ bitbucketId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Update Bitbucket <BitbucketIcon className="size-5" />

apps/dokploy/components/dashboard/settings/git/gitea/add-gitea-provider.tsx

@@ -143,7 +143,7 @@ export const AddGiteaProvider = () => {
 					<span>Gitea</span>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Gitea Provider <GiteaIcon className="size-5" />

apps/dokploy/components/dashboard/settings/git/github/edit-github-provider.tsx

@@ -92,7 +92,7 @@ export const EditGithubProvider = ({ githubId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Update Github <GithubIcon className="size-5" />

apps/dokploy/components/dashboard/settings/git/gitlab/add-gitlab-provider.tsx

@@ -115,7 +115,7 @@ export const AddGitlabProvider = () => {
 					<span>GitLab</span>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-2xl  ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						GitLab Provider <GitlabIcon className="size-5" />

apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx

@@ -105,7 +105,7 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl  overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-2xl ">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Update GitLab <GitlabIcon className="size-5" />

apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx

@@ -408,7 +408,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>
 						{notificationId ? "Update" : "Add"} Notification
@@ -907,7 +907,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="appBuildError"
 									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>App Build Error</FormLabel>
 												<FormDescription>
@@ -928,7 +928,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="databaseBackup"
 									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Database Backup</FormLabel>
 												<FormDescription>
@@ -949,7 +949,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="dockerCleanup"
 									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Docker Cleanup</FormLabel>
 												<FormDescription>
@@ -972,7 +972,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										control={form.control}
 										name="dokployRestart"
 										render={({ field }) => (
-											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Dokploy Restart</FormLabel>
 													<FormDescription>
@@ -995,7 +995,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										control={form.control}
 										name="serverThreshold"
 										render={({ field }) => (
-											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Server Threshold</FormLabel>
 													<FormDescription>

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -186,7 +186,7 @@ export const Enable2FA = () => {
 					Enable 2FA
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
+			<DialogContent className="sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>2FA Setup</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx

@@ -26,7 +26,7 @@ export const ShowServerActions = ({ serverId }: Props) => {
 					View Actions
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-xl overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-xl">
 				<div className="flex flex-col gap-1">
 					<DialogTitle className="text-xl">Web server settings</DialogTitle>
 					<DialogDescription>Reload or clean the web server.</DialogDescription>

apps/dokploy/components/dashboard/settings/servers/edit-script.tsx

@@ -99,7 +99,7 @@ export const EditScript = ({ serverId }: Props) => {
 					<FileTerminal className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl overflow-x-hidden">
+			<DialogContent className="sm:max-w-5xl overflow-x-hidden">
 				<DialogHeader>
 					<DialogTitle>Modify Script</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx

@@ -22,7 +22,7 @@ export const GPUSupportModal = () => {
 					<span>GPU Setup</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						Dokploy Server GPU Setup

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -88,7 +88,7 @@ export const SetupServer = ({ serverId }: Props) => {
 					Setup Server
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-4xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-4xl  ">
 				<DialogHeader>
 					<div className="flex flex-col gap-1.5">
 						<DialogTitle className="flex items-center gap-2">
@@ -147,12 +147,12 @@ export const SetupServer = ({ serverId }: Props) => {
 										<li>2. Add The SSH Key to Server Manually</li>
 									</ul>
 									<div className="flex flex-col gap-4 w-full overflow-auto">
-										<div className="flex relative flex-col gap-2 overflow-y-auto">
+										<div className="flex relative flex-col gap-2">
 											<div className="text-sm text-primary flex flex-row gap-2 items-center">
 												Copy Public Key ({server?.sshKey?.name})
 												<button
 													type="button"
-													className=" right-2 top-8"
+													className="right-2 top-8"
 													onClick={() => {
 														copy(
 															server?.sshKey?.publicKey || "Generate a SSH Key",

apps/dokploy/components/dashboard/settings/servers/show-docker-containers-modal.tsx

@@ -20,7 +20,7 @@ export const ShowDockerContainersModal = ({ serverId }: Props) => {
 					Show Docker Containers
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<div className="grid w-full gap-1">
 					<ShowContainers serverId={serverId} />
 				</div>

apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx

@@ -21,7 +21,7 @@ export const ShowMonitoringModal = ({ url, token }: Props) => {
 					Show Monitoring
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<div className="flex gap-4 py-4 w-full">
 					<ShowPaidMonitoring BASE_URL={url} token={token} />
 				</div>

apps/dokploy/components/dashboard/settings/servers/show-schedules-modal.tsx

@@ -20,7 +20,7 @@ export const ShowSchedulesModal = ({ serverId }: Props) => {
 					Show Schedules
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-5xl  ">
 				<ShowSchedules id={serverId} scheduleType="server" />
 			</DialogContent>
 		</Dialog>

apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx

@@ -20,7 +20,7 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
 					Show Swarm Overview
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<div className="grid w-full gap-1">
 					<SwarmMonitorCard serverId={serverId} />
 				</div>

apps/dokploy/components/dashboard/settings/servers/show-traefik-file-system-modal.tsx

@@ -20,7 +20,7 @@ export const ShowTraefikFileSystemModal = ({ serverId }: Props) => {
 					Show Traefik File System
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+			<DialogContent className="sm:max-w-7xl  ">
 				<ShowTraefikSystem serverId={serverId} />
 			</DialogContent>
 		</Dialog>

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx

@@ -265,7 +265,7 @@ export const CreateServer = ({ stepper }: Props) => {
 						/>
 					</form>
 
-					<DialogFooter className="pt-5">
+					<DialogFooter>
 						<Button
 							isLoading={form.formState.isSubmitting}
 							disabled={!canCreateMoreServers}

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx

@@ -117,12 +117,12 @@ export const CreateSSHKey = () => {
 										Option 2
 									</span>
 									<div className="flex flex-col gap-4 w-full overflow-auto">
-										<div className="flex relative flex-col gap-2 overflow-y-auto">
+										<div className="flex relative flex-col gap-2">
 											<div className="text-sm text-primary flex flex-row gap-2 items-center">
 												Copy Public Key
 												<button
 													type="button"
-													className=" right-2 top-8"
+													className="right-2 top-8"
 													onClick={() => {
 														copy(
 															cloudSSHKey?.publicKey || "Generate a SSH Key",

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx

@@ -60,7 +60,7 @@ export const WelcomeSuscription = () => {
 
 	return (
 		<Dialog open={isOpen}>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl min-h-[75vh]">
+			<DialogContent className="sm:max-w-7xl min-h-[75vh]">
 				{showConfetti ?? "Flaso"}
 				<div className="flex justify-center items-center w-full">
 					{showConfetti && (
@@ -289,7 +289,7 @@ export const WelcomeSuscription = () => {
 									<div className="flex flex-col gap-6">
 										<div className="flex flex-col gap-2">
 											<h2 className="text-lg font-semibold">You're All Set!</h2>
-											<p className=" text-muted-foreground">
+											<p className="text-muted-foreground">
 												Did you know you can deploy any number of applications
 												that your server can handle?
 											</p>

apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx

@@ -152,7 +152,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>SSH Key</DialogTitle>
 					<DialogDescription className="space-y-4">

apps/dokploy/components/dashboard/settings/users/add-invitation.tsx

@@ -108,7 +108,7 @@ export const AddInvitation = () => {
 					<PlusIcon className="h-4 w-4" /> Add Invitation
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add Invitation</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>

apps/dokploy/components/dashboard/settings/users/add-permissions.tsx

@@ -123,7 +123,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 					Add Permissions
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className="max-h-[85vh]  sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Permissions</DialogTitle>
 					<DialogDescription>Add or remove permissions</DialogDescription>
@@ -140,7 +140,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 							control={form.control}
 							name="canCreateProjects"
 							render={({ field }) => (
-								<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 									<div className="space-y-0.5">
 										<FormLabel>Create Projects</FormLabel>
 										<FormDescription>

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -83,7 +83,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
 			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent
-				className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl"
+				className="max-h-[85vh]    sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader>

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -78,7 +78,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update Traefik Environment</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/settings/web-server/local-server-config.tsx

@@ -77,7 +77,7 @@ const LocalServerConfig = ({ onSave }: Props) => {
 					<div className="flex flex-row items-center gap-2 justify-between w-full">
 						<div className="flex flex-row gap-2 items-center">
 							<Settings className="h-4 w-4" />
-							<span className=" dark:hover:text-white">
+							<span className="dark:hover:text-white">
 								{t("settings.terminal.connectionSettings")}
 							</span>
 						</div>

apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx

@@ -67,7 +67,7 @@ export const ShowModalLogs = ({
 	return (
 		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className="max-h-[85vh]  sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {appName}</DialogDescription>

apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx

@@ -53,7 +53,7 @@ export const TerminalModal = ({ children, serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent
-				className="max-h-screen  overflow-y-auto sm:max-w-7xl"
+				className="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
 				<DialogHeader className="flex flex-col gap-1">

apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx

@@ -87,7 +87,7 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
 					Services
 				</Button>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-10xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-10xl"}>
 				<DialogHeader>
 					<DialogTitle>Node Applications</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx

@@ -29,7 +29,7 @@ export const ShowNodeConfig = ({ nodeId, serverId }: Props) => {
 					Config
 				</Button>
 			</DialogTrigger>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Node Config</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -128,7 +128,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 										</div>
 									</TooltipTrigger>
 									<TooltipContent>
-										<div className="max-h-48 overflow-y-auto">
+										<div className="max-h-48">
 											{activeNodes.map((node) => (
 												<div key={node.ID} className="flex items-center gap-2">
 													{node.Hostname}
@@ -162,7 +162,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 										</div>
 									</TooltipTrigger>
 									<TooltipContent>
-										<div className="max-h-48 overflow-y-auto">
+										<div className="max-h-48">
 											{managerNodes.map((node) => (
 												<div key={node.ID} className="flex items-center gap-2">
 													{node.Hostname}

apps/dokploy/components/ui/dialog.tsx

@@ -1,10 +1,28 @@
+import { cn } from "@/lib/utils";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+const DialogContext = React.createContext<{
+	onOpenChange?: (open: boolean) => void;
+	open?: boolean;
+}>({});
 
-const Dialog = DialogPrimitive.Root;
+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 +48,103 @@ 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]);
+
+	// Handle outside interactions properly with Command components
+	const handleInteractOutside = React.useCallback(
+		(_e: Event) => {
+			if (onOpenChange) {
+				onOpenChange(false);
+			}
+		},
+		[onOpenChange],
+	);
+
+	const hasPaddingOverride = className?.includes("p-0");
+
+	// Separate DialogFooter from other children for proper layout
+	const childrenArray = React.Children.toArray(children);
+	const dialogFooter = childrenArray.find(
+		(child) => React.isValidElement(child) && child.type === DialogFooter,
+	);
+	const otherChildren = childrenArray.filter(
+		(child) => !(React.isValidElement(child) && child.type === DialogFooter),
+	);
+
+	return (
+		<DialogPortal>
+			{/* Custom overlay for modal=false - no click handler to avoid Command conflicts */}
+			<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" />
+			<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,
+				)}
+				onInteractOutside={(e) => {
+					const target = e.target as HTMLElement;
+					// Don't close when clicking inside popovers, dropdowns, or command components
+					if (
+						target.closest("[data-radix-popper-content-wrapper]") ||
+						target.closest("[cmdk-root]") ||
+						target.closest("[data-radix-command-root]")
+					) {
+						e.preventDefault();
+						return;
+					}
+					// Use our custom handler for modal=false behavior
+					handleInteractOutside(e);
+				}}
+				{...props}
+			>
+				<div
+					ref={contentRef}
+					className={cn(
+						"overflow-y-auto overflow-x-hidden flex-1 min-h-0 overscroll-contain",
+						!hasPaddingOverride && "p-6",
+					)}
+				>
+					{otherChildren}
+				</div>
+
+				{/* DialogFooter outside scrollable area with proper spacing */}
+				{dialogFooter && (
+					<div className="p-6 pt-0 border-t border-border/50">
+						{dialogFooter}
+					</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 = ({
@@ -57,7 +153,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn(
-			"flex flex-col space-y-1.5 text-center sm:text-left",
+			"flex flex-col space-y-1.5 text-center sm:text-left pb-4",
 			className,
 		)}
 		{...props}
@@ -71,7 +167,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={cn(
-			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			"flex flex-col-reverse mt-4 sm:flex-row sm:justify-end sm:space-x-2",
 			className,
 		)}
 		{...props}

apps/dokploy/components/ui/file-tree.tsx

@@ -246,7 +246,7 @@ const Leaf = React.forwardRef<
 					aria-hidden="true"
 				/>
 			)}
-			<p className=" text-sm whitespace-normal font-mono text-left">
+			<p className="text-sm whitespace-normal font-mono text-left">
 				{item.name}
 			</p>
 		</button>

apps/dokploy/pages/dashboard/project/[projectId].tsx

@@ -958,7 +958,7 @@ const Project = (
 											</div>
 										) : (
 											<div className="flex w-full flex-col gap-4">
-												<div className=" gap-5 pb-10  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+												<div className="gap-5 pb-10  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
 													{filteredServices?.map((service) => (
 														<Card
 															key={service.id}

apps/dokploy/pages/register.tsx

@@ -131,7 +131,7 @@ const Register = ({ isCloud }: Props) => {
 					</CardDescription>
 					<div className="mx-auto w-full max-w-lg bg-transparent">
 						{isError && (
-							<div className=" my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+							<div className="my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
 								<AlertTriangle className="text-red-600 dark:text-red-400" />
 								<span className="text-sm text-red-600 dark:text-red-400">
 									{error}