feat(networks): enhance network management and UI components

- Added functionality for assigning Docker networks to services, allowing users to manage network associations directly from the UI.
- Introduced new components for assigning networks to both individual services and compose files, improving user experience and flexibility.
- Updated existing components to integrate network assignment features, ensuring seamless interaction within the dashboard.
- Enhanced the database schema to support new network-related fields, including `networkIds` and `detachDokployNetwork`, for better service configuration.
- Improved the layout and responsiveness of various UI elements to accommodate new features and enhance usability.

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-w-[50vw]">
+								<DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col">
 									<DialogHeader>
 										<DialogTitle className="text-2xl font-bold">
 											Template Information
@@ -199,7 +199,7 @@ export const ShowImport = ({ composeId }: Props) => {
 										</DialogDescription>
 									</DialogHeader>
 
-									<div className="flex flex-col gap-6">
+									<div className="flex flex-col gap-6 flex-1 min-h-0 overflow-y-auto pr-1">
 										<div className="space-y-4">
 											<div className="flex items-center gap-2">
 												<Code2 className="h-5 w-5 text-primary" />
@@ -207,12 +207,14 @@ export const ShowImport = ({ composeId }: Props) => {
 													Docker Compose
 												</h3>
 											</div>
-											<CodeEditor
-												language="yaml"
-												value={templateInfo?.compose || ""}
-												className="font-mono"
-												readOnly
-											/>
+											<div className="max-h-[45vh] overflow-auto rounded-md border">
+												<CodeEditor
+													language="yaml"
+													value={templateInfo?.compose || ""}
+													className="font-mono"
+													readOnly
+												/>
+											</div>
 										</div>
 
 										<Separator />

apps/dokploy/components/dashboard/compose/advanced/add-isolation.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -111,7 +112,10 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 	return (
 		<Card className="bg-background">
 			<CardHeader>
-				<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
+				<CardTitle className="text-xl flex items-center gap-2">
+					Enable Isolated Deployment
+					<Badge variant="yellow">Deprecated</Badge>
+				</CardTitle>
 				<CardDescription>
 					Configure isolated deployment to the compose file.
 					<div className="text-sm text-muted-foreground flex flex-col gap-2">
@@ -138,6 +142,11 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 			</CardHeader>
 			<CardContent>
 				<div className="space-y-4">
+					<AlertBlock type="warning">
+						Isolated deployment is deprecated. Use the Networks section above to
+						attach networks per service and detach them from dokploy-network —
+						it is declarative and does not break on restarts.
+					</AlertBlock>
 					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 					<Form {...form}>
 						<form

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-200">
+			<DialogContent className="sm:max-w-6xl max-h-[85vh] flex flex-col">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
@@ -62,10 +62,6 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				<AlertBlock type="info" className="mb-4">
-					Preview your docker-compose file with added domains. Note: At least
-					one domain must be specified for this conversion to take effect.
-				</AlertBlock>
 				{isPending ? (
 					<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
 						<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
@@ -79,7 +75,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					</div>
 				) : (
 					<>
-						<div className="flex flex-row gap-2 justify-end my-4">
+						<div className="flex flex-row gap-2 justify-end">
 							<Button
 								variant="secondary"
 								isLoading={isPending}
@@ -100,14 +96,15 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 							</Button>
 						</div>
 
-						<pre>
+						<div className="flex-1 min-h-0 overflow-auto rounded-md border">
 							<CodeEditor
 								value={compose || ""}
 								language="yaml"
 								readOnly
-								height="50rem"
+								height="100%"
+								wrapperClassName="h-full"
 							/>
-						</pre>
+						</div>
 					</>
 				)}
 			</DialogContent>

apps/dokploy/components/dashboard/networks/assign-compose-networks.tsx

@@ -0,0 +1,347 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown, Loader2, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Command,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+
+interface Props {
+	composeId: string;
+}
+
+const serviceSchema = z.object({
+	serviceName: z.string(),
+	networkIds: z.array(z.string()),
+	detachDokployNetwork: z.boolean(),
+});
+
+const formSchema = z.object({
+	services: z.array(serviceSchema),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const AssignComposeNetworks = ({ composeId }: Props) => {
+	const [cacheType, setCacheType] = useState<"cache" | "fetch">("cache");
+
+	const { data: compose } = api.compose.one.useQuery({ composeId });
+	const {
+		data: services,
+		isLoading: isLoadingServices,
+		error: servicesError,
+		refetch: refetchServices,
+		isRefetching: isRefetchingServices,
+	} = api.compose.loadServices.useQuery(
+		{ composeId, type: cacheType },
+		{ retry: false },
+	);
+
+	const onRetry = () => {
+		setCacheType("fetch");
+		setTimeout(() => refetchServices(), 0);
+	};
+
+	const { data: networks } = api.network.all.useQuery(
+		{ serverId: compose?.serverId ?? undefined },
+		{ enabled: compose !== undefined },
+	);
+	const { mutateAsync, isPending } = api.compose.update.useMutation();
+	const utils = api.useUtils();
+
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: { services: [] },
+	});
+	const { fields } = useFieldArray({
+		control: form.control,
+		name: "services",
+	});
+
+	useEffect(() => {
+		if (!services) return;
+		const serviceNetworks = compose?.serviceNetworks ?? [];
+		form.reset({
+			services: services.map((serviceName) => {
+				const config = serviceNetworks.find(
+					(s) => s.serviceName === serviceName,
+				);
+				return {
+					serviceName,
+					networkIds: config?.networkIds ?? [],
+					detachDokployNetwork: config?.detachDokployNetwork ?? false,
+				};
+			}),
+		});
+	}, [services, compose?.serviceNetworks, form]);
+
+	const allowsBridge = compose?.composeType === "docker-compose";
+	const availableNetworks = (networks ?? []).filter(
+		(n) => allowsBridge || n.driver === "overlay",
+	);
+
+	const onSubmit = async (values: FormValues) => {
+		try {
+			const serviceNetworks = values.services.filter(
+				(s) => s.networkIds.length > 0 || s.detachDokployNetwork,
+			);
+			await mutateAsync({
+				composeId,
+				serviceNetworks,
+			});
+			toast.success("Networks updated. Redeploy the compose to apply them.");
+			await utils.compose.one.invalidate({ composeId });
+		} catch (error) {
+			toast.error("Error updating networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-start justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-1">
+					<CardTitle className="text-xl">Networks</CardTitle>
+					<CardDescription>
+						Attach Docker networks per service and detach it from
+						dokploy-network. Takes effect on the next deploy.
+					</CardDescription>
+				</div>
+				<Button
+					variant="outline"
+					size="sm"
+					isLoading={isRefetchingServices}
+					onClick={onRetry}
+				>
+					<RefreshCw className="size-4" />
+					Refresh
+				</Button>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{servicesError ? (
+					<div className="flex flex-col gap-3">
+						<AlertBlock type="error">
+							Could not load the compose services. If this compose was just
+							created from a template, it hasn't been cloned yet — click Reload
+							to clone the repository and read its services.
+						</AlertBlock>
+						<div className="flex justify-end">
+							<Button
+								variant="outline"
+								size="sm"
+								isLoading={isRefetchingServices}
+								onClick={onRetry}
+							>
+								<RefreshCw className="size-4" />
+								Reload services
+							</Button>
+						</div>
+					</div>
+				) : isLoadingServices ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Loading services...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : !services?.length ? (
+					<span className="py-6 text-center text-sm text-muted-foreground">
+						No services found in this compose.
+					</span>
+				) : (
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="flex flex-col gap-4"
+						>
+							{fields.map((fieldItem, index) => (
+								<ServiceRow
+									key={fieldItem.id}
+									control={form.control}
+									index={index}
+									service={fieldItem.serviceName}
+									availableNetworks={availableNetworks}
+								/>
+							))}
+							<div className="flex justify-end">
+								<Button
+									type="submit"
+									disabled={!form.formState.isDirty}
+									isLoading={isPending}
+								>
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
+
+type NetworkOption = { networkId: string; name: string; driver: string };
+
+const ServiceRow = ({
+	control,
+	index,
+	service,
+	availableNetworks,
+}: {
+	control: ReturnType<typeof useForm<FormValues>>["control"];
+	index: number;
+	service: string;
+	availableNetworks: NetworkOption[];
+}) => {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="flex flex-col gap-3 rounded-lg border p-4">
+			<FormField
+				control={control}
+				name={`services.${index}.detachDokployNetwork`}
+				render={({ field }) => (
+					<FormItem className="flex flex-row items-center justify-between gap-3 space-y-0">
+						<span className="text-sm font-medium">{service}</span>
+						<div className="flex items-center gap-2">
+							<span className="text-xs text-muted-foreground">
+								Detach dokploy-network
+							</span>
+							<FormControl>
+								<Switch
+									checked={field.value}
+									onCheckedChange={field.onChange}
+								/>
+							</FormControl>
+						</div>
+					</FormItem>
+				)}
+			/>
+
+			<FormField
+				control={control}
+				name={`services.${index}.networkIds`}
+				render={({ field }) => {
+					const selectedNetworks = availableNetworks.filter((n) =>
+						field.value.includes(n.networkId),
+					);
+					const toggle = (networkId: string) => {
+						field.onChange(
+							field.value.includes(networkId)
+								? field.value.filter((id) => id !== networkId)
+								: [...field.value, networkId],
+						);
+					};
+					return (
+						<FormItem className="space-y-3">
+							<Popover open={open} onOpenChange={setOpen}>
+								<PopoverTrigger asChild>
+									<Button
+										type="button"
+										variant="outline"
+										aria-expanded={open}
+										className="w-full justify-between"
+									>
+										<span className="text-muted-foreground">
+											{selectedNetworks.length > 0
+												? `${selectedNetworks.length} network${
+														selectedNetworks.length > 1 ? "s" : ""
+													} selected`
+												: "Select networks..."}
+										</span>
+										<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-[var(--radix-popover-trigger-width)] p-0"
+									align="start"
+								>
+									<Command>
+										<CommandInput
+											placeholder="Search networks..."
+											className="h-9"
+										/>
+										<CommandList className="max-h-60">
+											{availableNetworks.length === 0 ? (
+												<div className="py-6 text-center text-sm text-muted-foreground">
+													No networks available on this server.
+												</div>
+											) : (
+												<CommandGroup>
+													{availableNetworks.map((n) => {
+														const isSelected = field.value.includes(
+															n.networkId,
+														);
+														return (
+															<CommandItem
+																key={n.networkId}
+																value={n.name}
+																onSelect={() => toggle(n.networkId)}
+																className="cursor-pointer"
+															>
+																<Checkbox
+																	checked={isSelected}
+																	className="mr-2"
+																	onCheckedChange={() => toggle(n.networkId)}
+																/>
+																<span>{n.name}</span>
+																<Badge variant="outline" className="ml-2">
+																	{n.driver}
+																</Badge>
+																<Check
+																	className={cn(
+																		"ml-auto size-4",
+																		isSelected ? "opacity-100" : "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														);
+													})}
+												</CommandGroup>
+											)}
+										</CommandList>
+									</Command>
+								</PopoverContent>
+							</Popover>
+
+							{selectedNetworks.length > 0 && (
+								<div className="flex flex-wrap gap-1.5">
+									{selectedNetworks.map((n) => (
+										<Badge key={n.networkId} variant="secondary">
+											{n.name}
+										</Badge>
+									))}
+								</div>
+							)}
+						</FormItem>
+					);
+				}}
+			/>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/networks/assign-networks.tsx

@@ -0,0 +1,355 @@
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+
+type ServiceType =
+	| "application"
+	| "postgres"
+	| "mysql"
+	| "mariadb"
+	| "mongo"
+	| "redis"
+	| "libsql";
+
+interface Props {
+	id: string;
+	type: ServiceType;
+}
+
+export const AssignNetworks = ({ id, type }: Props) => {
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useState<string[]>([]);
+	const [detached, setDetached] = useState(false);
+
+	const {
+		service,
+		serverId,
+		networkIds,
+		detachDokployNetwork,
+		updateAsync,
+		isUpdating,
+		refetch,
+	} = useServiceNetworks(id, type);
+
+	const { data: networks } = api.network.all.useQuery(
+		{ serverId: serverId ?? undefined },
+		{ enabled: service !== undefined },
+	);
+
+	const { data: applicationDomains } = api.domain.byApplicationId.useQuery(
+		{ applicationId: id },
+		{ enabled: type === "application" },
+	);
+	const hasDomains = (applicationDomains?.length ?? 0) > 0;
+
+	useEffect(() => {
+		setSelected(networkIds ?? []);
+		setDetached(detachDokployNetwork ?? false);
+	}, [networkIds, detachDokployNetwork]);
+
+	const availableNetworks = (networks ?? []).filter(
+		(n) => n.driver === "overlay",
+	);
+	const selectedNetworks = availableNetworks.filter((n) =>
+		selected.includes(n.networkId),
+	);
+	const isDirty =
+		selected.length !== (networkIds?.length ?? 0) ||
+		selected.some((networkId) => !networkIds?.includes(networkId)) ||
+		detached !== detachDokployNetwork;
+
+	const toggle = (networkId: string) => {
+		setSelected((prev) =>
+			prev.includes(networkId)
+				? prev.filter((id) => id !== networkId)
+				: [...prev, networkId],
+		);
+	};
+
+	const onSave = async () => {
+		try {
+			await updateAsync({
+				networkIds: selected,
+				detachDokployNetwork: detached,
+			});
+			toast.success("Networks updated. Redeploy the service to apply them.");
+			await refetch();
+		} catch (error) {
+			toast.error("Error updating networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-1">
+					<CardTitle className="text-xl">Networks</CardTitle>
+					<CardDescription>
+						Attach additional Docker networks to this service so it can reach
+						services on those networks. Takes effect on the next deploy.
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="flex flex-row items-start justify-between gap-3 rounded-lg border p-4">
+					<div className="space-y-1 pr-1">
+						<div className="flex items-center gap-2">
+							<span className="text-sm font-medium">
+								Detach from dokploy-network
+							</span>
+							<Badge variant="secondary">dokploy-network</Badge>
+						</div>
+						<p className="text-sm text-muted-foreground">
+							By default the service joins the shared dokploy-network. Detach it
+							to keep it reachable only through the networks you attach below.
+						</p>
+					</div>
+					<Switch checked={detached} onCheckedChange={setDetached} />
+				</div>
+
+				{detached && hasDomains && (
+					<AlertBlock type="warning">
+						Warning: this service has domains. Detaching it from dokploy-network
+						will break Traefik routing, and its domains will stop working.
+					</AlertBlock>
+				)}
+
+				{detached && !hasDomains && selected.length === 0 && (
+					<AlertBlock type="warning">
+						This service is detached from dokploy-network but has no other
+						network attached. It would be unreachable, so dokploy-network will
+						be kept until you attach a network below.
+					</AlertBlock>
+				)}
+
+				<Popover open={open} onOpenChange={setOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							variant="outline"
+							aria-expanded={open}
+							className="w-full justify-between"
+						>
+							<span className="text-muted-foreground">
+								{selectedNetworks.length > 0
+									? `${selectedNetworks.length} network${
+											selectedNetworks.length > 1 ? "s" : ""
+										} selected`
+									: "Select networks..."}
+							</span>
+							<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-[var(--radix-popover-trigger-width)] p-0"
+						align="start"
+					>
+						<Command>
+							<CommandInput placeholder="Search networks..." className="h-9" />
+							<CommandList className="max-h-60">
+								{availableNetworks.length === 0 ? (
+									<div className="py-6 text-center text-sm text-muted-foreground">
+										No overlay networks on this server.
+									</div>
+								) : (
+									<>
+										<CommandEmpty className="py-6 text-center text-sm text-muted-foreground">
+											No networks found.
+										</CommandEmpty>
+										<CommandGroup>
+											{availableNetworks.map((n) => {
+												const isSelected = selected.includes(n.networkId);
+												return (
+													<CommandItem
+														key={n.networkId}
+														value={n.name}
+														onSelect={() => toggle(n.networkId)}
+														className="cursor-pointer"
+													>
+														<Checkbox
+															checked={isSelected}
+															className="mr-2"
+															onCheckedChange={() => toggle(n.networkId)}
+														/>
+														<span>{n.name}</span>
+														<Badge variant="outline" className="ml-2">
+															{n.driver}
+														</Badge>
+														<Check
+															className={cn(
+																"ml-auto size-4",
+																isSelected ? "opacity-100" : "opacity-0",
+															)}
+														/>
+													</CommandItem>
+												);
+											})}
+										</CommandGroup>
+									</>
+								)}
+							</CommandList>
+						</Command>
+					</PopoverContent>
+				</Popover>
+
+				{selectedNetworks.length > 0 && (
+					<div className="flex flex-wrap gap-1.5">
+						{selectedNetworks.map((n) => (
+							<Badge
+								key={n.networkId}
+								variant="secondary"
+								className="flex items-center gap-1 pr-1"
+							>
+								{n.name}
+								<button
+									type="button"
+									onClick={() => toggle(n.networkId)}
+									className="ml-0.5 rounded-full outline-hidden hover:opacity-70"
+								>
+									<X className="size-3" />
+									<span className="sr-only">Remove {n.name}</span>
+								</button>
+							</Badge>
+						))}
+					</div>
+				)}
+
+				<div className="flex justify-end">
+					<Button disabled={!isDirty} isLoading={isUpdating} onClick={onSave}>
+						Save
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
+
+// Maps a service type to its one-query and update-mutation, normalizing the
+// per-type id field name and the networkIds field.
+const useServiceNetworks = (id: string, type: ServiceType) => {
+	const application = api.application.one.useQuery(
+		{ applicationId: id },
+		{ enabled: type === "application" },
+	);
+	const postgres = api.postgres.one.useQuery(
+		{ postgresId: id },
+		{ enabled: type === "postgres" },
+	);
+	const mysql = api.mysql.one.useQuery(
+		{ mysqlId: id },
+		{ enabled: type === "mysql" },
+	);
+	const mariadb = api.mariadb.one.useQuery(
+		{ mariadbId: id },
+		{ enabled: type === "mariadb" },
+	);
+	const mongo = api.mongo.one.useQuery(
+		{ mongoId: id },
+		{ enabled: type === "mongo" },
+	);
+	const redis = api.redis.one.useQuery(
+		{ redisId: id },
+		{ enabled: type === "redis" },
+	);
+	const libsql = api.libsql.one.useQuery(
+		{ libsqlId: id },
+		{ enabled: type === "libsql" },
+	);
+	const applicationUpdate = api.application.update.useMutation();
+	const postgresUpdate = api.postgres.update.useMutation();
+	const mysqlUpdate = api.mysql.update.useMutation();
+	const mariadbUpdate = api.mariadb.update.useMutation();
+	const mongoUpdate = api.mongo.update.useMutation();
+	const redisUpdate = api.redis.update.useMutation();
+	const libsqlUpdate = api.libsql.update.useMutation();
+
+	const map = {
+		application: {
+			query: application,
+			mutation: applicationUpdate,
+			save: (payload: SavePayload) =>
+				applicationUpdate.mutateAsync({ applicationId: id, ...payload }),
+		},
+		postgres: {
+			query: postgres,
+			mutation: postgresUpdate,
+			save: (payload: SavePayload) =>
+				postgresUpdate.mutateAsync({ postgresId: id, ...payload }),
+		},
+		mysql: {
+			query: mysql,
+			mutation: mysqlUpdate,
+			save: (payload: SavePayload) =>
+				mysqlUpdate.mutateAsync({ mysqlId: id, ...payload }),
+		},
+		mariadb: {
+			query: mariadb,
+			mutation: mariadbUpdate,
+			save: (payload: SavePayload) =>
+				mariadbUpdate.mutateAsync({ mariadbId: id, ...payload }),
+		},
+		mongo: {
+			query: mongo,
+			mutation: mongoUpdate,
+			save: (payload: SavePayload) =>
+				mongoUpdate.mutateAsync({ mongoId: id, ...payload }),
+		},
+		redis: {
+			query: redis,
+			mutation: redisUpdate,
+			save: (payload: SavePayload) =>
+				redisUpdate.mutateAsync({ redisId: id, ...payload }),
+		},
+		libsql: {
+			query: libsql,
+			mutation: libsqlUpdate,
+			save: (payload: SavePayload) =>
+				libsqlUpdate.mutateAsync({ libsqlId: id, ...payload }),
+		},
+	}[type];
+
+	const service = map.query.data;
+
+	return {
+		service,
+		serverId: service?.serverId ?? null,
+		networkIds: service?.networkIds ?? [],
+		detachDokployNetwork: service?.detachDokployNetwork ?? false,
+		updateAsync: map.save,
+		isUpdating: map.mutation.isPending,
+		refetch: map.query.refetch,
+	};
+};
+
+type SavePayload = {
+	networkIds: string[];
+	detachDokployNetwork: boolean;
+};

apps/dokploy/components/dashboard/requests/requests-table.tsx

@@ -328,7 +328,7 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 				open={!!selectedRow}
 				onOpenChange={(_open) => setSelectedRow(undefined)}
 			>
-				<SheetContent className="sm:max-w-[740px]  flex flex-col">
+				<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
 					<SheetHeader>
 						<SheetTitle>Request log</SheetTitle>
 						<SheetDescription>

apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx

@@ -1,5 +1,6 @@
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
+import { AssignNetworks } from "@/components/dashboard/networks/assign-networks";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
 import { RebuildDatabase } from "./rebuild-database";
@@ -21,6 +22,7 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
 				<ShowClusterSettings id={id} type={type} />
 			) : null}
 			<ShowVolumes id={id} type={type} />
+			<AssignNetworks id={id} type={type} />
 			<ShowResources id={id} type={type} />
 			<RebuildDatabase id={id} type={type} />
 		</div>

apps/dokploy/components/shared/drawer-logs.tsx

@@ -47,7 +47,7 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
 				onClose();
 			}}
 		>
-			<SheetContent className="sm:max-w-[740px] flex flex-col">
+			<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
 				<SheetHeader>
 					<SheetTitle>Deployment Logs</SheetTitle>
 					<SheetDescription>Details of the request log entry.</SheetDescription>

apps/dokploy/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				"flex field-sizing-content min-h-[80px] w-full rounded-lg border border-input bg-transparent px-3 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				"flex field-sizing-content min-h-[80px] w-full [overflow-wrap:anywhere] rounded-lg border border-input bg-transparent px-3 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 				className,
 			)}
 			{...props}