fix: allow members with git providers permission to create and delete their own

The canAccessToGitProviders legacy override only granted read access, so
members with the Git Providers toggle enabled could not add providers — the
create/delete endpoints require gitProviders.create / gitProviders.delete.
This mirrors how the SSH Keys toggle already grants read/create/delete.

The git-provider remove endpoint now restricts non owner/admin roles to
deleting only their own providers (matching the ownership model used for
visibility and sharing), while owner/admin can still delete any provider in
the organization.

Closes #4695

apps/api/package.json

@@ -17,17 +17,17 @@
 		"hono": "^4.11.7",
 		"pino": "9.4.0",
 		"pino-pretty": "11.2.2",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "19.2.7",
+		"react-dom": "19.2.7",
 		"redis": "4.7.0",
 		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@types/node": "^24.4.0",
-		"@types/react": "^18.2.37",
-		"@types/react-dom": "^18.2.15",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.0",
 		"rimraf": "6.1.3",
-		"tsx": "^4.16.2",
+		"tsx": "^4.22.4",
 		"typescript": "^5.8.3"
 	},
 	"packageManager": "pnpm@10.22.0",

apps/dokploy/__test__/permissions/check-permission.test.ts

@@ -183,4 +183,29 @@ describe("legacy boolean overrides for member", () => {
 		memberToReturn = mockMemberData("member");
 		await expect(checkPermission(ctx, { docker: ["read"] })).rejects.toThrow();
 	});
+
+	it("member passes gitProviders.create with canAccessToGitProviders=true", async () => {
+		memberToReturn = mockMemberData("member", {
+			canAccessToGitProviders: true,
+		});
+		await expect(
+			checkPermission(ctx, { gitProviders: ["create"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member passes gitProviders.delete with canAccessToGitProviders=true", async () => {
+		memberToReturn = mockMemberData("member", {
+			canAccessToGitProviders: true,
+		});
+		await expect(
+			checkPermission(ctx, { gitProviders: ["delete"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member fails gitProviders.create with canAccessToGitProviders=false", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(
+			checkPermission(ctx, { gitProviders: ["create"] }),
+		).rejects.toThrow();
+	});
 });

apps/dokploy/__test__/permissions/resolve-permissions.test.ts

@@ -143,6 +143,24 @@ describe("free-tier resources for member", () => {
 		const perms = await resolvePermissions(ctx);
 		expect(perms.docker.read).toBe(true);
 	});
+
+	it("member gets gitProviders create/delete=false without legacy override", async () => {
+		memberToReturn = mockMemberData("member");
+		const perms = await resolvePermissions(ctx);
+		expect(perms.gitProviders.read).toBe(false);
+		expect(perms.gitProviders.create).toBe(false);
+		expect(perms.gitProviders.delete).toBe(false);
+	});
+
+	it("member gets gitProviders read/create/delete=true with canAccessToGitProviders", async () => {
+		memberToReturn = mockMemberData("member", {
+			canAccessToGitProviders: true,
+		});
+		const perms = await resolvePermissions(ctx);
+		expect(perms.gitProviders.read).toBe(true);
+		expect(perms.gitProviders.create).toBe(true);
+		expect(perms.gitProviders.delete).toBe(true);
+	});
 });
 
 describe("free-tier resources for owner", () => {

apps/dokploy/__test__/queues/concurrency.test.ts

@@ -0,0 +1,148 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const hasValidLicense = vi.fn();
+const getWebServerSettings = vi.fn();
+const findFirstOrg = vi.fn();
+const findFirstServer = vi.fn();
+
+vi.mock("@dokploy/server/db", () => ({
+	db: {
+		query: {
+			organization: {
+				findFirst: (...args: unknown[]) => findFirstOrg(...args),
+			},
+			server: {
+				findFirst: (...args: unknown[]) => findFirstServer(...args),
+			},
+		},
+	},
+}));
+
+vi.mock("@dokploy/server/db/schema", () => ({
+	organization: {},
+	server: {},
+}));
+
+vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
+	hasValidLicense: (...args: unknown[]) => hasValidLicense(...args),
+}));
+
+vi.mock("@dokploy/server/services/web-server-settings", () => ({
+	getWebServerSettings: (...args: unknown[]) => getWebServerSettings(...args),
+}));
+
+vi.mock("drizzle-orm", () => ({ eq: vi.fn() }));
+
+import {
+	assertBuildsConcurrencyAllowed,
+	resolveBuildsConcurrency,
+} from "../../server/queues/concurrency";
+import { LOCAL_PARTITION } from "../../server/queues/in-memory-queue";
+
+describe("resolveBuildsConcurrency (enterprise gating)", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		findFirstOrg.mockResolvedValue({ id: "org-1" });
+	});
+
+	describe("local web server partition", () => {
+		it("returns the configured concurrency when licensed", async () => {
+			getWebServerSettings.mockResolvedValue({ buildsConcurrency: 5 });
+			hasValidLicense.mockResolvedValue(true);
+
+			await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(5);
+		});
+
+		it("clamps to the free max (2) when there is no valid license", async () => {
+			getWebServerSettings.mockResolvedValue({ buildsConcurrency: 10 });
+			hasValidLicense.mockResolvedValue(false);
+
+			await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
+		});
+
+		it("allows the free max (2) without a license", async () => {
+			getWebServerSettings.mockResolvedValue({ buildsConcurrency: 2 });
+			hasValidLicense.mockResolvedValue(false);
+
+			await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(2);
+		});
+
+		it("does not cap the value when licensed (N allowed)", async () => {
+			getWebServerSettings.mockResolvedValue({ buildsConcurrency: 999 });
+			hasValidLicense.mockResolvedValue(true);
+
+			await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(
+				999,
+			);
+		});
+
+		it("defaults to 1 when settings are missing", async () => {
+			getWebServerSettings.mockResolvedValue(undefined);
+			hasValidLicense.mockResolvedValue(true);
+
+			await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
+		});
+	});
+
+	describe("remote server partition", () => {
+		it("returns the server concurrency when its org is licensed", async () => {
+			findFirstServer.mockResolvedValue({
+				buildsConcurrency: 4,
+				organizationId: "org-1",
+			});
+			hasValidLicense.mockResolvedValue(true);
+
+			await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(4);
+			expect(hasValidLicense).toHaveBeenCalledWith("org-1");
+		});
+
+		it("clamps to the free max (2) when the server org is not licensed", async () => {
+			findFirstServer.mockResolvedValue({
+				buildsConcurrency: 8,
+				organizationId: "org-1",
+			});
+			hasValidLicense.mockResolvedValue(false);
+
+			await expect(resolveBuildsConcurrency("server-1")).resolves.toBe(2);
+		});
+
+		it("defaults to 1 for an unknown server", async () => {
+			findFirstServer.mockResolvedValue(undefined);
+
+			await expect(resolveBuildsConcurrency("ghost")).resolves.toBe(1);
+		});
+	});
+
+	it("falls back to 1 if resolution throws", async () => {
+		getWebServerSettings.mockRejectedValue(new Error("db down"));
+
+		await expect(resolveBuildsConcurrency(LOCAL_PARTITION)).resolves.toBe(1);
+	});
+});
+
+describe("assertBuildsConcurrencyAllowed", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("allows up to the free max (2) without checking the license", async () => {
+		await expect(
+			assertBuildsConcurrencyAllowed(2, "org-1"),
+		).resolves.toBeUndefined();
+		expect(hasValidLicense).not.toHaveBeenCalled();
+	});
+
+	it("allows more than 2 when licensed", async () => {
+		hasValidLicense.mockResolvedValue(true);
+		await expect(
+			assertBuildsConcurrencyAllowed(5, "org-1"),
+		).resolves.toBeUndefined();
+	});
+
+	it("rejects more than 2 without a license", async () => {
+		hasValidLicense.mockResolvedValue(false);
+		await expect(assertBuildsConcurrencyAllowed(3, "org-1")).rejects.toThrow(
+			/enterprise license/i,
+		);
+	});
+});

apps/dokploy/__test__/queues/in-memory-queue.test.ts

@@ -0,0 +1,337 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+	getGroup,
+	getPartition,
+	InMemoryQueue,
+	LOCAL_PARTITION,
+} from "../../server/queues/in-memory-queue";
+import type { DeploymentJob } from "../../server/queues/queue-types";
+
+const appJob = (applicationId: string, serverId?: string): DeploymentJob => ({
+	applicationId,
+	titleLog: "deploy",
+	descriptionLog: "",
+	type: "deploy",
+	applicationType: "application",
+	serverId,
+});
+
+const composeJob = (composeId: string, serverId?: string): DeploymentJob => ({
+	composeId,
+	titleLog: "deploy",
+	descriptionLog: "",
+	type: "deploy",
+	applicationType: "compose",
+	serverId,
+});
+
+/** A controllable async task: resolves only when `release()` is called. */
+const deferred = () => {
+	let resolve!: () => void;
+	const promise = new Promise<void>((r) => {
+		resolve = r;
+	});
+	return { promise, release: resolve };
+};
+
+const flush = () => new Promise((r) => setTimeout(r, 0));
+
+describe("getPartition / getGroup", () => {
+	it("partitions by serverId, falling back to the local partition", () => {
+		expect(getPartition(appJob("a"))).toBe(LOCAL_PARTITION);
+		expect(getPartition(appJob("a", "server-1"))).toBe("server-1");
+	});
+
+	it("groups applications and compose by their id", () => {
+		expect(getGroup(appJob("a"))).toBe("application:a");
+		expect(getGroup(composeJob("c"))).toBe("compose:c");
+	});
+});
+
+describe("InMemoryQueue concurrency", () => {
+	let nowValue = 0;
+	const now = () => ++nowValue;
+
+	beforeEach(() => {
+		nowValue = 0;
+	});
+
+	it("runs different applications concurrently up to the limit", async () => {
+		const tasks = new Map<string, ReturnType<typeof deferred>>();
+		const started: string[] = [];
+
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 2, now });
+		queue.process(async (job) => {
+			const id = (job.data as any).applicationId;
+			started.push(id);
+			const d = deferred();
+			tasks.set(id, d);
+			await d.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("a"));
+		await queue.add(appJob("b"));
+		await queue.add(appJob("c"));
+		await flush();
+
+		// Concurrency 2 -> only a and b start, c waits.
+		expect(started).toEqual(["a", "b"]);
+
+		tasks.get("a")!.release();
+		await flush();
+
+		// A slot freed -> c starts.
+		expect(started).toEqual(["a", "b", "c"]);
+	});
+
+	it("serializes jobs of the same application (per-group FIFO)", async () => {
+		const tasks: Array<ReturnType<typeof deferred>> = [];
+		const started: number[] = [];
+		let counter = 0;
+
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 5, now });
+		queue.process(async () => {
+			started.push(++counter);
+			const d = deferred();
+			tasks.push(d);
+			await d.promise;
+		});
+		await queue.run();
+
+		// Two deploys of the SAME app, even with concurrency 5.
+		await queue.add(appJob("same"));
+		await queue.add(appJob("same"));
+		await flush();
+
+		// Only the first one runs; the second waits for the group to free.
+		expect(started).toEqual([1]);
+
+		tasks[0]!.release();
+		await flush();
+
+		expect(started).toEqual([1, 2]);
+	});
+
+	it("isolates concurrency per server partition", async () => {
+		const started: string[] = [];
+		const tasks = new Map<string, ReturnType<typeof deferred>>();
+
+		// server-1 allows 1, server-2 allows 1, but they are independent.
+		const queue = new InMemoryQueue({
+			resolveConcurrency: () => 1,
+			now,
+		});
+		queue.process(async (job) => {
+			const id = `${job.data.serverId}:${(job.data as any).applicationId}`;
+			started.push(id);
+			const d = deferred();
+			tasks.set(id, d);
+			await d.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("a", "server-1"));
+		await queue.add(appJob("b", "server-2"));
+		await flush();
+
+		// One per partition runs in parallel despite concurrency 1 each.
+		expect(started.sort()).toEqual(["server-1:a", "server-2:b"]);
+	});
+
+	it("honors a different concurrency per server", async () => {
+		const started: string[] = [];
+		const tasks = new Map<string, ReturnType<typeof deferred>>();
+
+		// server-fast allows 2, server-slow allows 1.
+		const queue = new InMemoryQueue({
+			resolveConcurrency: (partition) => (partition === "server-fast" ? 2 : 1),
+			now,
+		});
+		queue.process(async (job) => {
+			const id = `${job.data.serverId}:${(job.data as any).applicationId}`;
+			started.push(id);
+			const d = deferred();
+			tasks.set(id, d);
+			await d.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("a", "server-fast"));
+		await queue.add(appJob("b", "server-fast"));
+		await queue.add(appJob("c", "server-slow"));
+		await queue.add(appJob("d", "server-slow"));
+		await flush();
+
+		// server-fast runs 2 in parallel; server-slow only 1.
+		expect(started.sort()).toEqual([
+			"server-fast:a",
+			"server-fast:b",
+			"server-slow:c",
+		]);
+
+		// Free a server-slow slot -> its queued app starts.
+		tasks.get("server-slow:c")!.release();
+		await flush();
+		expect(started).toContain("server-slow:d");
+	});
+
+	it("serializes the same app on a server even with spare concurrency", async () => {
+		const started: number[] = [];
+		const tasks: Array<ReturnType<typeof deferred>> = [];
+		let counter = 0;
+
+		// Plenty of room (concurrency 2) but two deploys of the SAME app.
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 2, now });
+		queue.process(async () => {
+			started.push(++counter);
+			const d = deferred();
+			tasks.push(d);
+			await d.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("app-x", "server-1"));
+		await queue.add(appJob("app-x", "server-1"));
+		await flush();
+
+		// Only one build of app-x runs despite 2 free slots.
+		expect(started).toEqual([1]);
+
+		tasks[0]!.release();
+		await flush();
+		expect(started).toEqual([1, 2]);
+	});
+
+	it("clamps concurrency below 1 up to 1 (license-disabled behaviour)", async () => {
+		const started: string[] = [];
+		const tasks = new Map<string, ReturnType<typeof deferred>>();
+
+		// Simulate a non-licensed resolver returning 0 — must still run 1.
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 0, now });
+		queue.process(async (job) => {
+			const id = (job.data as any).applicationId;
+			started.push(id);
+			const d = deferred();
+			tasks.set(id, d);
+			await d.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("a"));
+		await queue.add(appJob("b"));
+		await flush();
+
+		expect(started).toEqual(["a"]);
+	});
+
+	it("picks up concurrency changes between scheduling ticks", async () => {
+		const started: string[] = [];
+		const tasks = new Map<string, ReturnType<typeof deferred>>();
+		let limit = 1;
+
+		const queue = new InMemoryQueue({
+			resolveConcurrency: () => limit,
+			now,
+		});
+		queue.process(async (job) => {
+			const id = (job.data as any).applicationId;
+			started.push(id);
+			const d = deferred();
+			tasks.set(id, d);
+			await d.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("a"));
+		await queue.add(appJob("b"));
+		await flush();
+		expect(started).toEqual(["a"]);
+
+		// Raise the limit (e.g. license activated) and release the running job
+		// so a new tick observes the new concurrency.
+		limit = 2;
+		tasks.get("a")!.release();
+		await flush();
+
+		expect(started).toContain("b");
+	});
+});
+
+describe("InMemoryQueue job management", () => {
+	it("lists waiting jobs and removes them by predicate", async () => {
+		const block = deferred();
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 1 });
+		queue.process(async () => {
+			await block.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("running"));
+		await queue.add(appJob("waiting-1"));
+		await queue.add(composeJob("waiting-2"));
+		await flush();
+
+		const waiting = await queue.getJobs(["waiting"]);
+		expect(waiting.map((j) => j.data)).toHaveLength(2);
+
+		const removed = queue.removeWaiting(
+			(data) => (data as any).applicationId === "waiting-1",
+		);
+		expect(removed).toBe(1);
+
+		const after = await queue.getJobs(["waiting"]);
+		expect(after).toHaveLength(1);
+	});
+
+	it("clears all waiting jobs", async () => {
+		const block = deferred();
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 1 });
+		queue.process(async () => {
+			await block.promise;
+		});
+		await queue.run();
+
+		await queue.add(appJob("running"));
+		await queue.add(appJob("waiting-1"));
+		await queue.add(appJob("waiting-2"));
+		await flush();
+
+		expect(queue.clearWaiting()).toBe(2);
+		expect(await queue.getJobs(["waiting"])).toHaveLength(0);
+	});
+
+	it("starts processing as soon as a processor is registered", async () => {
+		const started: string[] = [];
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 5 });
+
+		// No processor yet -> jobs queue but do not run.
+		await queue.add(appJob("a"));
+		await flush();
+		expect(started).toEqual([]);
+
+		// Registering the processor auto-starts the queue (no separate run()).
+		queue.process(async (job) => {
+			started.push((job.data as any).applicationId);
+		});
+		await flush();
+		expect(started).toEqual(["a"]);
+	});
+
+	it("continues scheduling after a job throws", async () => {
+		const started: string[] = [];
+		const queue = new InMemoryQueue({ resolveConcurrency: () => 1 });
+		queue.process(async (job) => {
+			const id = (job.data as any).applicationId;
+			started.push(id);
+			if (id === "a") throw new Error("boom");
+		});
+		await queue.run();
+
+		await queue.add(appJob("a"));
+		await queue.add(appJob("b"));
+		await flush();
+
+		expect(started).toEqual(["a", "b"]);
+	});
+});

apps/dokploy/__test__/traefik/server/update-server-config.test.ts

@@ -25,6 +25,7 @@ const baseSettings: WebServerSettings = {
 	letsEncryptEmail: null,
 	sshPrivateKey: null,
 	enableDockerCleanup: false,
+	buildsConcurrency: 1,
 	logCleanupCron: null,
 	metricsConfig: {
 		containers: {

apps/dokploy/components.json

@@ -1,17 +1,22 @@
 {
 	"$schema": "https://ui.shadcn.com/schema.json",
-	"style": "default",
+	"style": "radix-nova",
 	"rsc": false,
 	"tsx": true,
 	"tailwind": {
-		"config": "tailwind.config.ts",
+		"config": "",
 		"css": "styles/globals.css",
-		"baseColor": "zinc",
+		"baseColor": "neutral",
 		"cssVariables": true,
 		"prefix": ""
 	},
 	"aliases": {
 		"components": "@/components",
 		"utils": "@/lib/utils"
-	}
+	},
+	"iconLibrary": "lucide",
+	"rtl": false,
+	"menuColor": "default",
+	"menuAccent": "subtle",
+	"registries": {}
 }

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

@@ -156,7 +156,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 
 				<div className="flex gap-4 h-[60vh] py-4">
 					{/* Left Column - Menu */}
-					<div className="w-64 flex-shrink-0 border-r pr-4 overflow-y-auto">
+					<div className="w-64 shrink-0 border-r pr-4 overflow-y-auto">
 						<nav className="space-y-1">
 							<TooltipProvider>
 								{menuItems.map((item) => (

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

@@ -229,7 +229,7 @@ export const ShowImport = ({ composeId }: Props) => {
 															(domain, index) => (
 																<div
 																	key={index}
-																	className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
+																	className="rounded-lg border bg-card p-3 text-card-foreground shadow-xs"
 																>
 																	<div className="font-medium">
 																		{domain.serviceName}

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

@@ -246,7 +246,7 @@ export const HandleRedirect = ({
 								control={form.control}
 								name="permanent"
 								render={({ field }) => (
-									<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+									<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 										<div className="space-y-0.5">
 											<FormLabel>Permanent</FormLabel>
 											<FormDescription>

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

@@ -53,7 +53,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-140 min-h-40 overflow-y-auto">
 							<CodeEditor
 								lineWrapping
 								value={data || "Empty"}

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

@@ -155,7 +155,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												lineWrapping
-												wrapperClassName="h-[35rem] font-mono"
+												wrapperClassName="h-140 font-mono"
 												placeholder={`http:
 routers:
     router-name:

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

@@ -220,7 +220,7 @@ export const AddVolumes = ({
 															/>
 															<Label
 																htmlFor="bind"
-																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
 															>
 																Bind Mount
 															</Label>
@@ -240,7 +240,7 @@ export const AddVolumes = ({
 															/>
 															<Label
 																htmlFor="volume"
-																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
 															>
 																Volume Mount
 															</Label>
@@ -264,7 +264,7 @@ export const AddVolumes = ({
 														/>
 														<Label
 															htmlFor="file"
-															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
 														>
 															File Mount
 														</Label>
@@ -324,7 +324,7 @@ export const AddVolumes = ({
 											control={form.control}
 											name="content"
 											render={({ field }) => (
-												<FormItem className="max-w-full max-w-[45rem]">
+												<FormItem className="max-w-full max-w-180">
 													<FormLabel>Content</FormLabel>
 													<FormControl>
 														<FormControl>

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

@@ -111,7 +111,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 											{mount.type === "file" && (
 												<div className="flex flex-col gap-1">
 													<span className="font-medium">Content</span>
-													<span className="text-sm text-muted-foreground line-clamp-[10] whitespace-break-spaces">
+													<span className="text-sm text-muted-foreground line-clamp-10 whitespace-break-spaces">
 														{mount.content}
 													</span>
 												</div>

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

@@ -253,7 +253,7 @@ export const UpdateVolume = ({
 										control={form.control}
 										name="content"
 										render={({ field }) => (
-											<FormItem className="w-full max-w-[45rem]">
+											<FormItem className="w-full max-w-180">
 												<FormLabel>Content</FormLabel>
 												<FormControl>
 													<FormControl>

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

@@ -191,7 +191,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] overflow-y-auto space-y-0 border p-4 bg-background rounded custom-logs-scrollbar"
 				>
 					{" "}
 					{filteredLogs.length > 0 ? (

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

@@ -147,7 +147,7 @@ export const ShowDeployments = ({
 	}, []);
 
 	return (
-		<Card className="bg-background border-none">
+		<Card className="bg-background border-0">
 			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
 				<div className="flex flex-col gap-2">
 					<CardTitle className="text-xl">Deployments</CardTitle>
@@ -233,7 +233,6 @@ export const ShowDeployments = ({
 							<span>Webhook URL: </span>
 							<div className="flex flex-row items-center gap-2">
 								<Badge
-									role="button"
 									tabIndex={0}
 									aria-label="Copy webhook URL to clipboard"
 									className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer whitespace-normal break-all"
@@ -301,7 +300,7 @@ export const ShowDeployments = ({
 										</span>
 
 										<div className="flex flex-col gap-1">
-											<span className="break-words text-sm text-muted-foreground whitespace-pre-wrap">
+											<span className="wrap-break-word text-sm text-muted-foreground whitespace-pre-wrap">
 												{isExpanded || !needsTruncation
 													? titleText
 													: truncateDescription(titleText)}

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

@@ -349,10 +349,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 									{domainType === "compose" && (
 										<div className="flex flex-col gap-2 w-full">
 											{errorServices && (
-												<AlertBlock
-													type="warning"
-													className="[overflow-wrap:anywhere]"
-												>
+												<AlertBlock type="warning" className="wrap-anywhere">
 													{errorServices?.message}
 												</AlertBlock>
 											)}
@@ -420,7 +417,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																			<TooltipContent
 																				side="left"
 																				sideOffset={5}
-																				className="max-w-[10rem]"
+																				className="max-w-40"
 																			>
 																				<p>
 																					Fetch: Will clone the repository and
@@ -450,7 +447,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																			<TooltipContent
 																				side="left"
 																				sideOffset={5}
-																				className="max-w-[10rem]"
+																				className="max-w-40"
 																			>
 																				<p>
 																					Cache: If you previously deployed this
@@ -488,7 +485,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																	<TooltipContent
 																		side="left"
 																		sideOffset={5}
-																		className="max-w-[10rem]"
+																		className="max-w-40"
 																	>
 																		<p>
 																			{isManualInput
@@ -565,7 +562,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 														<TooltipContent
 															side="left"
 															sideOffset={5}
-															className="max-w-[10rem]"
+															className="max-w-40"
 														>
 															<p>Generate sslip.io domain</p>
 														</TooltipContent>
@@ -618,7 +615,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 									control={form.control}
 									name="stripPath"
 									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-sm">
+										<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-xs">
 											<div className="space-y-0.5">
 												<FormLabel>Strip Path</FormLabel>
 												<FormDescription>
@@ -662,7 +659,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 									control={form.control}
 									name="useCustomEntrypoint"
 									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 											<div className="space-y-0.5">
 												<FormLabel>Custom Entrypoint</FormLabel>
 												<FormDescription>
@@ -711,7 +708,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 									control={form.control}
 									name="https"
 									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 											<div className="space-y-0.5">
 												<FormLabel>HTTPS</FormLabel>
 												<FormDescription>
@@ -763,6 +760,37 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																<SelectItem value={"custom"}>Custom</SelectItem>
 															</SelectContent>
 														</Select>
+														<FormDescription>
+															{field.value === "none" && (
+																<>
+																	<strong>None</strong> serves TLS using any
+																	certificate you created in the{" "}
+																	<Link
+																		href="/dashboard/settings/certificates"
+																		className="text-primary"
+																	>
+																		Certificates
+																	</Link>{" "}
+																	section whose CN/SAN matches this host —
+																	Traefik selects it automatically via SNI.
+																</>
+															)}
+															{field.value === "letsencrypt" && (
+																<>
+																	<strong>Let's Encrypt</strong> auto-provisions
+																	a certificate automatically for this host.
+																</>
+															)}
+															{field.value === "custom" && (
+																<>
+																	<strong>Custom</strong> uses a Traefik cert
+																	resolver by name (defined in your static
+																	configuration).
+																</>
+															)}
+															{!field.value &&
+																"Select a certificate provider to see how TLS will be served for this host."}
+														</FormDescription>
 														<FormMessage />
 													</FormItem>
 												);
@@ -777,10 +805,19 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 													return (
 														<FormItem>
 															<FormLabel>Custom Certificate Resolver</FormLabel>
+															<FormDescription>
+																Enter the <strong>name</strong> of a Traefik
+																cert resolver defined in your static
+																configuration (e.g. <code>letsencrypt</code>) —
+																not certificate or private key content. To use a
+																certificate you pasted in the Certificates
+																section, choose <strong>None</strong> instead
+																and Traefik will match it by SNI.
+															</FormDescription>
 															<FormControl>
 																<Input
 																	className="w-full"
-																	placeholder="Enter your custom certificate resolver"
+																	placeholder="e.g. letsencrypt"
 																	{...field}
 																	value={field.value || ""}
 																	onChange={(e) => {

apps/dokploy/components/dashboard/application/environment/show.tsx

@@ -189,7 +189,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							control={form.control}
 							name="createEnvFile"
 							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-sm">
+								<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-xs">
 									<div className="space-y-0.5">
 										<FormLabel>Create Environment File</FormLabel>
 										<FormDescription>

apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx

@@ -245,7 +245,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -333,7 +333,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -498,7 +498,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx

@@ -305,7 +305,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 										onCheckedChange={field.onChange}
 									/>
 								</FormControl>
-								<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 							</FormItem>
 						)}
 					/>

apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx

@@ -258,7 +258,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -353,7 +353,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -525,7 +525,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -233,7 +233,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -320,7 +320,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -531,7 +531,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -254,7 +254,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -351,7 +351,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -518,7 +518,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/application/general/generic/show.tsx

@@ -154,7 +154,10 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 					}}
 				>
 					<div className="flex flex-row items-center justify-between w-full overflow-auto">
-						<TabsList className="flex gap-4 justify-start bg-transparent">
+						<TabsList
+							variant="line"
+							className="flex gap-4 justify-start bg-transparent"
+						>
 							<TabsTrigger
 								value="github"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"

apps/dokploy/components/dashboard/application/general/show.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import {
 	Ban,
 	CheckCircle2,
@@ -94,7 +94,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>
 													Downloads the source code and performs a complete
 													build
@@ -137,7 +137,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>Reload the application without rebuilding it</p>
 											</TooltipContent>
 										</TooltipPrimitive.Portal>
@@ -176,7 +176,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>
 													Only rebuilds the application without downloading new
 													code
@@ -219,7 +219,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>
 													Start the application (requires a previous successful
 													build)
@@ -259,7 +259,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>Stop the currently running application</p>
 											</TooltipContent>
 										</TooltipPrimitive.Portal>

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

@@ -200,7 +200,7 @@ export const AddPreviewDomain = ({
 														<TooltipContent
 															side="left"
 															sideOffset={5}
-															className="max-w-[10rem]"
+															className="max-w-40"
 														>
 															<p>Generate sslip.io domain</p>
 														</TooltipContent>
@@ -249,7 +249,7 @@ export const AddPreviewDomain = ({
 									control={form.control}
 									name="https"
 									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 											<div className="space-y-0.5">
 												<FormLabel>HTTPS</FormLabel>
 												<FormDescription>

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

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import {
 	ExternalLink,
 	FileText,
@@ -132,7 +132,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 											<div className="p-4">
 												<div className="flex items-start justify-between mb-3">
 													<div className="flex items-start gap-3">
-														<GitPullRequest className="size-5 text-muted-foreground mt-1 flex-shrink-0" />
+														<GitPullRequest className="size-5 text-muted-foreground mt-1 shrink-0" />
 														<div>
 															<div className="font-medium text-sm">
 																{deployment.pullRequestTitle}
@@ -152,7 +152,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 												</div>
 
 												<div className="pl-8 space-y-3">
-													<div className="relative flex-grow">
+													<div className="relative grow">
 														<Input
 															value={deploymentUrl}
 															readOnly
@@ -244,7 +244,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 																		<TooltipPrimitive.Portal>
 																			<TooltipContent
 																				sideOffset={5}
-																				className="z-[60]"
+																				className="z-60"
 																			>
 																				<p>
 																					Rebuild the preview deployment without

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

@@ -325,7 +325,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 										control={form.control}
 										name="previewHttps"
 										render={({ field }) => (
-											<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 												<div className="space-y-0.5">
 													<FormLabel>HTTPS</FormLabel>
 													<FormDescription>
@@ -431,7 +431,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 										control={form.control}
 										name="previewRequireCollaboratorPermissions"
 										render={({ field }) => (
-											<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm col-span-2">
+											<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs col-span-2">
 												<div className="space-y-0.5">
 													<FormLabel>
 														Require Collaborator Permissions

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

@@ -355,10 +355,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 						{scheduleTypeForm === "compose" && (
 							<div className="flex flex-col w-full gap-4">
 								{errorServices && (
-									<AlertBlock
-										type="warning"
-										className="[overflow-wrap:anywhere]"
-									>
+									<AlertBlock type="warning" className="wrap-anywhere">
 										{errorServices?.message}
 									</AlertBlock>
 								)}
@@ -414,7 +411,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 														<TooltipContent
 															side="left"
 															sideOffset={5}
-															className="max-w-[10rem]"
+															className="max-w-40"
 														>
 															<p>
 																Fetch: Will clone the repository and load the
@@ -444,7 +441,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 														<TooltipContent
 															side="left"
 															sideOffset={5}
-															className="max-w-[10rem]"
+															className="max-w-40"
 														>
 															<p>
 																Cache: If you previously deployed this compose,
@@ -534,7 +531,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>

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

@@ -73,7 +73,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 	};
 
 	return (
-		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
+		<Card className=" px-6 shadow-none bg-transparent h-full min-h-[50vh]">
 			<CardHeader className="px-0">
 				<div className="flex justify-between items-center gap-y-2 flex-wrap">
 					<div className="flex flex-col gap-2">
@@ -110,12 +110,12 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 									className="flex flex-col sm:flex-row sm:items-center flex-wrap sm:flex-nowrap gap-y-2 justify-between rounded-lg border p-3 transition-colors bg-muted/50 w-full"
 								>
 									<div className="flex items-start gap-3 w-full sm:w-auto">
-										<div className="flex flex-shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5">
+										<div className="flex shrink-0 h-9 w-9 items-center justify-center rounded-full bg-primary/5">
 											<Clock className="size-4 text-primary/70" />
 										</div>
 										<div className="space-y-1.5 w-full sm:w-auto">
 											<div className="flex items-center gap-2 flex-wrap">
-												<h3 className="text-sm font-medium leading-none [overflow-wrap:anywhere] line-clamp-3">
+												<h3 className="text-sm font-medium leading-none wrap-anywhere line-clamp-3">
 													{schedule.name}
 												</h3>
 												<Badge
@@ -126,7 +126,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 												</Badge>
 											</div>
 											{schedule.description && (
-												<p className="text-xs text-muted-foreground/70 [overflow-wrap:anywhere] line-clamp-2">
+												<p className="text-xs text-muted-foreground/70 wrap-anywhere line-clamp-2">
 													{schedule.description}
 												</p>
 											)}
@@ -154,7 +154,7 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 											</div>
 											{schedule.command && (
 												<div className="flex items-start gap-2 max-w-full">
-													<Terminal className="size-3.5 text-muted-foreground/70 flex-shrink-0 mt-0.5" />
+													<Terminal className="size-3.5 text-muted-foreground/70 shrink-0 mt-0.5" />
 													<code className="font-mono text-[10px] text-muted-foreground/70 break-all max-w-[calc(100%-20px)]">
 														{schedule.command}
 													</code>

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

@@ -349,10 +349,7 @@ export const HandleVolumeBackups = ({
 							<>
 								<div className="flex flex-col w-full gap-4">
 									{errorServices && (
-										<AlertBlock
-											type="warning"
-											className="[overflow-wrap:anywhere]"
-										>
+										<AlertBlock type="warning" className="wrap-anywhere">
 											{errorServices?.message}
 										</AlertBlock>
 									)}
@@ -408,7 +405,7 @@ export const HandleVolumeBackups = ({
 															<TooltipContent
 																side="left"
 																sideOffset={5}
-																className="max-w-[10rem]"
+																className="max-w-40"
 															>
 																<p>
 																	Fetch: Will clone the repository and load the
@@ -438,7 +435,7 @@ export const HandleVolumeBackups = ({
 															<TooltipContent
 																side="left"
 																sideOffset={5}
-																className="max-w-[10rem]"
+																className="max-w-40"
 															>
 																<p>
 																	Cache: If you previously deployed this

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

@@ -181,7 +181,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -263,7 +263,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>

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

@@ -77,7 +77,7 @@ export const ShowVolumeBackups = ({
 	};
 
 	return (
-		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
+		<Card className=" px-6 shadow-none bg-transparent h-full min-h-[50vh]">
 			<CardHeader className="px-0">
 				<div className="flex justify-between items-center flex-wrap gap-2">
 					<div className="flex flex-col gap-2">

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

@@ -160,7 +160,7 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 										control={form.control}
 										name="isolatedDeployment"
 										render={({ field }) => (
-											<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs">
 												<div className="space-y-0.5">
 													<FormLabel>
 														Enable Isolated Deployment ({data?.appName})

apps/dokploy/components/dashboard/compose/general/actions.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
@@ -72,7 +72,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
-									<TooltipContent sideOffset={5} className="z-[60]">
+									<TooltipContent sideOffset={5} className="z-60">
 										<p>
 											Downloads the source code and performs a complete build
 										</p>
@@ -113,7 +113,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
-									<TooltipContent sideOffset={5} className="z-[60]">
+									<TooltipContent sideOffset={5} className="z-60">
 										<p>Reload the compose without rebuilding it</p>
 									</TooltipContent>
 								</TooltipPrimitive.Portal>
@@ -154,7 +154,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>
 												Start the compose (requires a previous successful build)
 											</p>
@@ -193,7 +193,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Stop the currently running compose</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

apps/dokploy/components/dashboard/compose/general/compose-file-editor.tsx

@@ -135,7 +135,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 							render={({ field }) => (
 								<FormItem className="overflow-auto">
 									<FormControl className="">
-										<div className="flex flex-col gap-4 w-full outline-none focus:outline-none overflow-auto">
+										<div className="flex flex-col gap-4 w-full outline-hidden focus:outline-hidden overflow-auto">
 											<CodeEditor
 												// disabled
 												language="yaml"

apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx

@@ -247,7 +247,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -335,7 +335,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -502,7 +502,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx

@@ -313,7 +313,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 										onCheckedChange={field.onChange}
 									/>
 								</FormControl>
-								<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 							</FormItem>
 						)}
 					/>

apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx

@@ -244,7 +244,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -331,7 +331,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -491,7 +491,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx

@@ -234,7 +234,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -321,7 +321,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -534,7 +534,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx

@@ -256,7 +256,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -353,7 +353,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -520,7 +520,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 											onCheckedChange={field.onChange}
 										/>
 									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormLabel className="mt-0!">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -143,7 +143,10 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 					}}
 				>
 					<div className="flex flex-row items-center justify-between w-full overflow-auto">
-						<TabsList className="flex gap-4 justify-start bg-transparent">
+						<TabsList
+							variant="line"
+							className="flex gap-4 justify-start bg-transparent"
+						>
 							<TabsTrigger
 								value="github"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"

apps/dokploy/components/dashboard/compose/general/randomize-compose.tsx

@@ -160,7 +160,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 								control={form.control}
 								name="randomize"
 								render={({ field }) => (
-									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs">
 										<div className="space-y-0.5">
 											<FormLabel>Apply Randomize</FormLabel>
 											<FormDescription>

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]">
+			<DialogContent className="sm:max-w-6xl max-h-200">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
@@ -67,11 +67,11 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					one domain must be specified for this conversion to take effect.
 				</AlertBlock>
 				{isPending ? (
-					<div className="flex flex-row items-center justify-center min-h-[25rem] border p-4 rounded-md">
+					<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" />
 					</div>
 				) : compose?.length === 5 ? (
-					<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-[25rem]">
+					<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-100">
 						<Puzzle className="h-8 w-8 text-muted-foreground mb-2" />
 						<span className="text-muted-foreground">
 							No converted compose data available.

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

@@ -364,7 +364,7 @@ export const HandleBackup = ({
 					>
 						<div className="grid grid-cols-1 gap-4">
 							{errorServices && (
-								<AlertBlock type="warning" className="[overflow-wrap:anywhere]">
+								<AlertBlock type="warning" className="wrap-anywhere">
 									{errorServices?.message}
 								</AlertBlock>
 							)}
@@ -409,7 +409,7 @@ export const HandleBackup = ({
 													<Button
 														variant="outline"
 														className={cn(
-															"w-full justify-between !bg-input",
+															"w-full justify-between bg-input!",
 															!field.value && "text-muted-foreground",
 														)}
 													>
@@ -528,7 +528,7 @@ export const HandleBackup = ({
 															<TooltipContent
 																side="left"
 																sideOffset={5}
-																className="max-w-[10rem]"
+																className="max-w-40"
 															>
 																<p>
 																	Fetch: Will clone the repository and load the
@@ -558,7 +558,7 @@ export const HandleBackup = ({
 															<TooltipContent
 																side="left"
 																sideOffset={5}
-																className="max-w-[10rem]"
+																className="max-w-40"
 															>
 																<p>
 																	Cache: If you previously deployed this

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

@@ -345,7 +345,7 @@ export const RestoreBackup = ({
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -427,7 +427,7 @@ export const RestoreBackup = ({
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between bg-input!",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -622,7 +622,7 @@ export const RestoreBackup = ({
 														<TooltipContent
 															side="left"
 															sideOffset={5}
-															className="max-w-[10rem]"
+															className="max-w-40"
 														>
 															<p>
 																Fetch: Will clone the repository and load the
@@ -652,7 +652,7 @@ export const RestoreBackup = ({
 														<TooltipContent
 															side="left"
 															sideOffset={5}
-															className="max-w-[10rem]"
+															className="max-w-40"
 														>
 															<p>
 																Cache: If you previously deployed this compose,

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

@@ -44,7 +44,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 				</DialogHeader>
 				<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
 					<code>
-						<pre className="whitespace-pre-wrap break-words">
+						<pre className="whitespace-pre-wrap wrap-break-word">
 							<CodeEditor
 								language="json"
 								lineWrapping

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

@@ -165,7 +165,7 @@ export function AnalyzeLogs({ logs, context }: Props) {
 					) : (
 						<>
 							<div className="max-h-[400px] overflow-y-auto">
-								<div className="prose prose-sm dark:prose-invert max-w-none text-sm break-words">
+								<div className="prose prose-sm dark:prose-invert max-w-none text-sm wrap-break-word">
 									<ReactMarkdown>{data.analysis}</ReactMarkdown>
 								</div>
 							</div>

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

@@ -119,7 +119,7 @@ export function LineCountFilter({
 							placeholder="Number of lines"
 							value={inputValue}
 							onValueChange={handleInputChange}
-							className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+							className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
 							onKeyDown={(e) => {
 								if (e.key === "Enter") {
 									e.preventDefault();
@@ -146,7 +146,7 @@ export function LineCountFilter({
 									<CommandPrimitive.Item
 										key={option.value}
 										onSelect={() => handleSelect(option.label)}
-										className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground"
+										className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground"
 									>
 										<div
 											className={cn(

apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx

@@ -4,7 +4,6 @@ import { Badge } from "@/components/ui/badge";
 import {
 	Tooltip,
 	TooltipContent,
-	TooltipPortal,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
@@ -65,22 +64,20 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 
 	const tooltip = (color: string, timestamp: string | null) => {
 		const square = (
-			<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
+			<div className={cn("w-2 h-full shrink-0 rounded-[3px]", color)} />
 		);
 		return timestamp ? (
 			<TooltipProvider delayDuration={0} disableHoverableContent>
 				<Tooltip>
 					<TooltipTrigger asChild>{square}</TooltipTrigger>
-					<TooltipPortal>
-						<TooltipContent
-							sideOffset={5}
-							className="bg-popover border-border z-[99999]"
-						>
-							<p className="text text-xs text-muted-foreground break-all max-w-md">
-								<pre>{timestamp}</pre>
-							</p>
-						</TooltipContent>
-					</TooltipPortal>
+					<TooltipContent
+						sideOffset={5}
+						className="bg-popover border-border z-99999"
+					>
+						<p className="text text-xs text-muted-foreground break-all max-w-md">
+							<pre>{timestamp}</pre>
+						</p>
+					</TooltipContent>
 				</Tooltip>
 			</TooltipProvider>
 		) : (
@@ -107,7 +104,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 				{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
 				{tooltip(color, rawTimestamp)}
 				{!noTimestamp && (
-					<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
+					<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 shrink-0">
 						{formattedTime}
 					</span>
 				)}

apps/dokploy/components/dashboard/docker/remove/remove-container.tsx

@@ -26,7 +26,7 @@ export const RemoveContainerDialog = ({ containerId, serverId }: Props) => {
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
 				<DropdownMenuItem
-					className="w-full cursor-pointer text-red-500 hover:!text-red-600"
+					className="w-full cursor-pointer text-red-500 hover:text-red-600!"
 					onSelect={(e) => e.preventDefault()}
 				>
 					Remove Container

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

@@ -100,7 +100,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 			<Form {...form}>
 				<form
 					onSubmit={form.handleSubmit(onSubmit)}
-					className="w-full relative z-[5]"
+					className="w-full relative z-5"
 				>
 					<div className="flex flex-col overflow-auto">
 						{isLoadingFile ? (
@@ -123,7 +123,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												lineWrapping
-												wrapperClassName="h-[35rem] font-mono"
+												wrapperClassName="h-140 font-mono"
 												placeholder={`http:
 routers:
     router-name:
@@ -143,7 +143,7 @@ routers:
 										</pre>
 										<div className="flex justify-end absolute z-50 right-6 top-8">
 											<Button
-												className="shadow-sm"
+												className="shadow-xs"
 												variant="secondary"
 												type="button"
 												onClick={async () => {

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

@@ -97,7 +97,7 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
 									<>
 										<Tree
 											data={directories}
-											className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
+											className="lg:max-w-76 w-full lg:h-[660px] border rounded-lg"
 											onSelectChange={(item) => setFile(item?.id || null)}
 											folderIcon={Folder}
 											itemIcon={Workflow}

apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx

@@ -197,7 +197,7 @@ export const ImpersonationBar = () => {
 										>
 											{selectedUser ? (
 												<div className="flex items-center gap-2">
-													<UserIcon className="mr-2 h-4 w-4 flex-shrink-0" />
+													<UserIcon className="mr-2 h-4 w-4 shrink-0" />
 													<span className="truncate flex flex-col items-start">
 														<span className="text-sm font-medium">
 															{`${selectedUser.name} ${selectedUser.lastName}`.trim() ||
@@ -245,7 +245,7 @@ export const ImpersonationBar = () => {
 																	}}
 																>
 																	<span className="flex items-center gap-2 flex-1">
-																		<UserIcon className="h-4 w-4 flex-shrink-0" />
+																		<UserIcon className="h-4 w-4 shrink-0" />
 																		<span className="flex flex-col items-start">
 																			<span className="text-sm font-medium">
 																				{`${user.name} ${user.lastName}`.trim() ||

apps/dokploy/components/dashboard/libsql/general/show-general-libsql.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -96,7 +96,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>Downloads and sets up the Libsql database</p>
 											</TooltipContent>
 										</TooltipPrimitive.Portal>
@@ -136,7 +136,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
 											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
+											<TooltipContent sideOffset={5} className="z-60">
 												<p>Restart the Libsql service without rebuilding</p>
 											</TooltipContent>
 										</TooltipPrimitive.Portal>
@@ -176,7 +176,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>
 														Start the Libsql database (requires a previous
 														successful setup)
@@ -218,7 +218,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Stop the currently running Libsql database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -243,7 +243,7 @@ export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Open a terminal to the Libsql container</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

apps/dokploy/components/dashboard/libsql/general/show-internal-libsql-credentials.tsx

@@ -1,4 +1,3 @@
-import { SelectGroup } from "@radix-ui/react-select";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -6,6 +5,7 @@ import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
+	SelectGroup,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,

apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -99,7 +99,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Downloads and sets up the MariaDB database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -141,7 +141,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Restart the MariaDB service without rebuilding</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -183,7 +183,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>
 															Start the MariaDB database (requires a previous
 															successful setup)
@@ -225,7 +225,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>Stop the currently running MariaDB database</p>
 													</TooltipContent>
 												</TooltipPrimitive.Portal>
@@ -250,7 +250,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Open a terminal to the MariaDB container</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

apps/dokploy/components/dashboard/mongo/general/show-general-mongo.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -99,7 +99,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Downloads and sets up the MongoDB database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -139,7 +139,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Restart the MongoDB service without rebuilding</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -179,7 +179,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>
 															Start the MongoDB database (requires a previous
 															successful setup)
@@ -219,7 +219,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>Stop the currently running MongoDB database</p>
 													</TooltipContent>
 												</TooltipPrimitive.Portal>
@@ -244,7 +244,7 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Open a terminal to the MongoDB container</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx

@@ -34,7 +34,7 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 	}));
 
 	return (
-		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
+		<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
 			<AreaChart
 				data={transformedData}
 				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}

apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx

@@ -29,7 +29,7 @@ export const DockerCpuChart = ({ accumulativeData }: Props) => {
 	}));
 
 	return (
-		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
+		<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
 			<AreaChart
 				data={transformedData}
 				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}

apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx

@@ -29,7 +29,7 @@ export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
 	}));
 
 	return (
-		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
+		<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
 			<AreaChart
 				data={transformedData}
 				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}

apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx

@@ -78,7 +78,7 @@ export const DockerDiskUsageChart = () => {
 
 	if (isLoading) {
 		return (
-			<div className="flex items-center justify-center h-[16rem]">
+			<div className="flex items-center justify-center h-64">
 				<Loader2 className="size-5 animate-spin text-muted-foreground" />
 			</div>
 		);

apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx

@@ -35,7 +35,7 @@ export const DockerMemoryChart = ({
 	}));
 
 	return (
-		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
+		<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
 			<AreaChart
 				data={transformedData}
 				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}

apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx

@@ -34,7 +34,7 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 	}));
 
 	return (
-		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
+		<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
 			<AreaChart
 				data={transformedData}
 				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}

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

@@ -227,7 +227,7 @@ export const ContainerFreeMonitoring = ({
 									String(currentData.cpu.value ?? "0%").replace("%", ""),
 									10,
 								)}
-								className="w-[100%]"
+								className="w-full"
 							/>
 							<DockerCpuChart accumulativeData={accumulativeData.cpu} />
 						</div>
@@ -250,7 +250,7 @@ export const ContainerFreeMonitoring = ({
 										convertMemoryToBytes(currentData.memory.value.total)) *
 									100
 								}
-								className="w-[100%]"
+								className="w-full"
 							/>
 							<DockerMemoryChart
 								accumulativeData={accumulativeData.memory}
@@ -275,7 +275,7 @@ export const ContainerFreeMonitoring = ({
 								</span>
 								<Progress
 									value={currentData.disk.value.diskUsedPercentage}
-									className="w-[100%]"
+									className="w-full"
 								/>
 								<DockerDiskChart
 									accumulativeData={accumulativeData.disk}

apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx

@@ -115,7 +115,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx

@@ -84,7 +84,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx

@@ -99,7 +99,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx

@@ -122,7 +122,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx

@@ -71,7 +71,7 @@ export function CPUChart({ data }: CPUChartProps) {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx

@@ -86,7 +86,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx

@@ -90,7 +90,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 								if (active && payload && payload.length) {
 									const data = payload?.[0]?.payload;
 									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
+										<div className="rounded-lg border bg-background p-2 shadow-xs">
 											<div className="grid grid-cols-2 gap-2">
 												<div className="flex flex-col">
 													<span className="text-[0.70rem] uppercase text-muted-foreground">

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

@@ -202,7 +202,7 @@ export const ShowPaidMonitoring = ({
 
 			{/* Stats Cards */}
 			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+				<div className="rounded-lg border text-card-foreground shadow-xs p-6">
 					<div className="flex items-center gap-2">
 						<Clock className="h-4 w-4 text-muted-foreground" />
 						<h3 className="text-sm font-medium">Uptime</h3>
@@ -212,7 +212,7 @@ export const ShowPaidMonitoring = ({
 					</p>
 				</div>
 
-				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+				<div className="rounded-lg border text-card-foreground shadow-xs p-6">
 					<div className="flex items-center gap-2">
 						<Cpu className="h-4 w-4 text-muted-foreground" />
 						<h3 className="text-sm font-medium">CPU Usage</h3>
@@ -220,7 +220,7 @@ export const ShowPaidMonitoring = ({
 					<p className="mt-2 text-2xl font-bold">{metrics.cpu}%</p>
 				</div>
 
-				<div className="rounded-lg border text-card-foreground bg-transparent shadow-sm p-6">
+				<div className="rounded-lg border text-card-foreground bg-transparent shadow-xs p-6">
 					<div className="flex items-center gap-2">
 						<MemoryStick className="h-4 w-4 text-muted-foreground" />
 						<h3 className="text-sm font-medium">Memory Usage</h3>
@@ -230,7 +230,7 @@ export const ShowPaidMonitoring = ({
 					</p>
 				</div>
 
-				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+				<div className="rounded-lg border text-card-foreground shadow-xs p-6">
 					<div className="flex items-center gap-2">
 						<HardDrive className="h-4 w-4 text-muted-foreground" />
 						<h3 className="text-sm font-medium">Disk Usage</h3>
@@ -240,7 +240,7 @@ export const ShowPaidMonitoring = ({
 			</div>
 
 			{/* System Information */}
-			<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+			<div className="rounded-lg border text-card-foreground shadow-xs p-6">
 				<h3 className="text-lg font-medium mb-4">System Information</h3>
 				<div className="grid gap-4 md:grid-cols-2">
 					<div>

apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -97,7 +97,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Downloads and sets up the MySQL database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -137,7 +137,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Restart the MySQL service without rebuilding</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -177,7 +177,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>
 															Start the MySQL database (requires a previous
 															successful setup)
@@ -217,7 +217,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>Stop the currently running MySQL database</p>
 													</TooltipContent>
 												</TooltipPrimitive.Portal>
@@ -242,7 +242,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Open a terminal to the MySQL container</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -99,7 +99,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Downloads and sets up the PostgreSQL database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -139,7 +139,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>
 														Restart the PostgreSQL service without rebuilding
 													</p>
@@ -181,7 +181,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>
 															Start the PostgreSQL database (requires a previous
 															successful setup)
@@ -221,7 +221,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>
 															Stop the currently running PostgreSQL database
 														</p>
@@ -248,7 +248,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Open a terminal to the PostgreSQL container</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

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

@@ -180,7 +180,7 @@ export const AddApplication = ({ environmentId, projectName }: Props) => {
 													</FormLabel>
 												</TooltipTrigger>
 												<TooltipContent
-													className="z-[999] w-[300px]"
+													className="z-999 w-[300px]"
 													align="start"
 													side="top"
 												>

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

@@ -191,7 +191,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 													</FormLabel>
 												</TooltipTrigger>
 												<TooltipContent
-													className="z-[999] w-[300px]"
+													className="z-999 w-[300px]"
 													align="start"
 													side="top"
 												>

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

@@ -412,7 +412,7 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 															/>
 															<Label
 																htmlFor={key}
-																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
 															>
 																{value.icon}
 																{value.label}
@@ -765,7 +765,7 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 										name="replicaSets"
 										render={({ field }) => {
 											return (
-												<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+												<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 													<div className="space-y-0.5">
 														<FormLabel>Use Replica Sets</FormLabel>
 													</div>

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

@@ -231,7 +231,7 @@ export const AddImport = ({ environmentId, projectName }: Props) => {
 														</FormLabel>
 													</TooltipTrigger>
 													<TooltipContent
-														className="z-[999] w-[300px]"
+														className="z-999 w-[300px]"
 														align="start"
 														side="top"
 													>
@@ -386,7 +386,7 @@ export const AddImport = ({ environmentId, projectName }: Props) => {
 											{templateInfo.template.domains.map((domain, index) => (
 												<div
 													key={index}
-													className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
+													className="rounded-lg border bg-card p-3 text-card-foreground shadow-xs"
 												>
 													<div className="font-medium">
 														{domain.serviceName}

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

@@ -236,7 +236,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 										<Button
 											variant="outline"
 											className={cn(
-												"w-full sm:w-[200px] justify-between !bg-input",
+												"w-full sm:w-[200px] justify-between bg-input!",
 											)}
 										>
 											{isLoadingTags
@@ -296,7 +296,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 									variant={showBookmarksOnly ? "default" : "outline"}
 									size="icon"
 									onClick={() => setShowBookmarksOnly(!showBookmarksOnly)}
-									className="h-9 w-9 flex-shrink-0"
+									className="h-9 w-9 shrink-0"
 									disabled={isLoadingBookmarks}
 								>
 									<Bookmark
@@ -311,7 +311,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 									onClick={() =>
 										setViewMode(viewMode === "detailed" ? "icon" : "detailed")
 									}
-									className="h-9 w-9 flex-shrink-0"
+									className="h-9 w-9 shrink-0"
 								>
 									{viewMode === "detailed" ? (
 										<LayoutGrid className="size-4" />
@@ -398,7 +398,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 											<Button
 												variant="ghost"
 												size="icon"
-												className="h-8 w-8 bg-background/80 backdrop-blur-sm hover:bg-background"
+												className="h-8 w-8 bg-background/80 backdrop-blur-xs hover:bg-background"
 												onClick={(e) => handleToggleBookmark(e, template.id)}
 											>
 												<Bookmark
@@ -451,7 +451,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 
 										{/* Template Content */}
 										{viewMode === "detailed" && (
-											<ScrollArea className="flex-1 p-6">
+											<ScrollArea className="min-h-0 flex-1 p-6">
 												<div className="text-sm text-muted-foreground">
 													{template?.description}
 												</div>
@@ -534,7 +534,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 																			</Label>
 																		</TooltipTrigger>
 																		<TooltipContent
-																			className="z-[999] w-[300px]"
+																			className="z-999 w-[300px]"
 																			align="start"
 																			side="top"
 																		>

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx

@@ -297,7 +297,7 @@ export const AdvancedEnvironmentSelector = ({
 					</DialogHeader>
 
 					<div className="space-y-4">
-						<div className="space-y-1">
+						<div className="space-y-2">
 							<Label htmlFor="name">Name</Label>
 							<Input
 								id="name"
@@ -306,7 +306,7 @@ export const AdvancedEnvironmentSelector = ({
 								placeholder="Environment name"
 							/>
 						</div>
-						<div className="space-y-1">
+						<div className="space-y-2">
 							<Label htmlFor="description">Description (optional)</Label>
 							<Textarea
 								id="description"

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

@@ -5,7 +5,7 @@ import type { StepProps } from "./step-two";
 export const StepThree = ({ templateInfo }: StepProps) => {
 	return (
 		<div className="flex flex-col h-full">
-			<div className="flex-grow">
+			<div className="grow">
 				<div className="space-y-6">
 					<h2 className="text-lg font-semibold">Step 3: Review and Finalize</h2>
 					<div className="space-y-4">

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

@@ -201,7 +201,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 
 	return (
 		<div className="flex flex-col h-full gap-6">
-			<div className="flex-grow overflow-auto pb-8">
+			<div className="grow overflow-auto pb-8">
 				<div className="space-y-6">
 					<h2 className="text-lg font-semibold">Step 2: Choose a Variant</h2>
 					{!selectedVariant && (

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

@@ -184,7 +184,7 @@ export const TemplateGenerator = ({ environmentId }: Props) => {
 							>
 								{stepper.all.map((step, index, array) => (
 									<React.Fragment key={step.id}>
-										<li className="flex items-center gap-4 flex-shrink-0">
+										<li className="flex items-center gap-4 shrink-0">
 											<Button
 												type="button"
 												role="tab"

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

@@ -154,7 +154,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 													lineWrapping
 													language="properties"
 													readOnly={!canWrite}
-													wrapperClassName="h-[35rem] font-mono"
+													wrapperClassName="h-140 font-mono"
 													placeholder={`NODE_ENV=development
 DATABASE_URL=postgresql://localhost:5432/mydb
 API_KEY=your-api-key-here

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

@@ -152,7 +152,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 													lineWrapping
 													language="properties"
 													readOnly={!canWrite}
-													wrapperClassName="h-[35rem] font-mono"
+													wrapperClassName="h-140 font-mono"
 													placeholder={`NODE_ENV=production
 PORT=3000
 

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

@@ -207,7 +207,7 @@ export const ShowProjects = () => {
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
 						<div className="flex justify-between gap-4 w-full items-center flex-wrap p-6">
-							<CardHeader className="p-0">
+							<CardHeader className="flex-1 p-0">
 								<CardTitle className="text-xl flex flex-row gap-2">
 									<FolderInput className="size-6 text-muted-foreground self-center" />
 									Projects

apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -98,7 +98,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Downloads and sets up the Redis database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -138,7 +138,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
+												<TooltipContent sideOffset={5} className="z-60">
 													<p>Restart the Redis service without rebuilding</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
@@ -178,7 +178,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>
 															Start the Redis database (requires a previous
 															successful setup)
@@ -218,7 +218,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 													</div>
 												</TooltipTrigger>
 												<TooltipPrimitive.Portal>
-													<TooltipContent sideOffset={5} className="z-[60]">
+													<TooltipContent sideOffset={5} className="z-60">
 														<p>Stop the currently running Redis database</p>
 													</TooltipContent>
 												</TooltipPrimitive.Portal>
@@ -243,7 +243,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
+										<TooltipContent sideOffset={5} className="z-60">
 											<p>Open a terminal to the Redis container</p>
 										</TooltipContent>
 									</TooltipPrimitive.Portal>

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

@@ -335,14 +335,14 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 							Details of the request log entry.
 						</SheetDescription>
 					</SheetHeader>
-					<ScrollArea className="flex-grow mt-4 pr-4">
+					<ScrollArea className="grow mt-4 pr-4">
 						<div className="border rounded-md">
 							<Table>
 								<TableBody>
 									{Object.entries(selectedRow || {}).map(([key, value]) => (
 										<TableRow key={key}>
 											<TableCell className="font-medium">{key}</TableCell>
-											<TableCell className="truncate break-words break-before-all whitespace-pre-wrap">
+											<TableCell className="truncate wrap-break-word break-before-all whitespace-pre-wrap">
 												{key === "RequestAddr" ? (
 													<div className="flex items-center gap-2 bg-muted p-1 rounded">
 														<span>{value}</span>

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

@@ -226,7 +226,7 @@ export const ShowRequests = () => {
 											</PopoverTrigger>
 											<PopoverContent className="w-auto p-0" align="end">
 												<Calendar
-													initialFocus
+													autoFocus
 													mode="range"
 													defaultMonth={dateRange.from}
 													selected={{

apps/dokploy/components/dashboard/search-command.tsx

@@ -150,7 +150,7 @@ export const SearchCommand = () => {
 										{application.type === "compose" && (
 											<CircuitBoard className="h-6 w-6 mr-2" />
 										)}
-										<span className="flex-grow">
+										<span className="grow">
 											{project.name} / {application.environmentName} /{" "}
 											{application.name}{" "}
 											<div style={{ display: "none" }}>{application.id}</div>

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

@@ -317,7 +317,7 @@ export const ShowBilling = () => {
 											<Button
 												variant={!updateFormAnnual ? "default" : "outline"}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpdateFormAnnual(false)}
 											>
 												Monthly
@@ -325,7 +325,7 @@ export const ShowBilling = () => {
 											<Button
 												variant={updateFormAnnual ? "default" : "outline"}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpdateFormAnnual(true)}
 											>
 												Annual (20% off)
@@ -339,7 +339,7 @@ export const ShowBilling = () => {
 													upgradeTier === "hobby" ? "default" : "outline"
 												}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpgradeTier("hobby")}
 											>
 												Hobby
@@ -349,7 +349,7 @@ export const ShowBilling = () => {
 													upgradeTier === "startup" ? "default" : "outline"
 												}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpgradeTier("startup")}
 											>
 												Startup
@@ -532,7 +532,7 @@ export const ShowBilling = () => {
 											<Button
 												variant={!updateFormAnnual ? "default" : "outline"}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpdateFormAnnual(false)}
 											>
 												Monthly
@@ -540,7 +540,7 @@ export const ShowBilling = () => {
 											<Button
 												variant={updateFormAnnual ? "default" : "outline"}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpdateFormAnnual(true)}
 											>
 												Annual (20% off)
@@ -554,7 +554,7 @@ export const ShowBilling = () => {
 													upgradeTier === "hobby" ? "default" : "outline"
 												}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpgradeTier("hobby")}
 											>
 												Hobby
@@ -564,7 +564,7 @@ export const ShowBilling = () => {
 													upgradeTier === "startup" ? "default" : "outline"
 												}
 												size="sm"
-												className="min-w-[6rem]"
+												className="min-w-24"
 												onClick={() => setUpgradeTier("startup")}
 											>
 												Startup
@@ -768,7 +768,7 @@ export const ShowBilling = () => {
 									</Tabs>
 									<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
 										{/* Hobby */}
-										<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-sm">
+										<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-xs">
 											{isAnnual && (
 												<Badge className="mb-3 w-fit" variant="secondary">
 													20% off
@@ -892,7 +892,7 @@ export const ShowBilling = () => {
 										</section>
 
 										{/* Startup - Recommended */}
-										<section className="flex flex-col rounded-2xl border-2 border-primary px-5 py-6 shadow-sm">
+										<section className="flex flex-col rounded-2xl border-2 border-primary px-5 py-6 shadow-xs">
 											<div className="mb-3 flex flex-wrap gap-2">
 												<Badge className="w-fit" variant="default">
 													Recommended
@@ -1043,7 +1043,7 @@ export const ShowBilling = () => {
 										</section>
 
 										{/* Enterprise */}
-										<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-sm">
+										<section className="flex flex-col rounded-2xl border border-border px-5 py-6 shadow-xs">
 											<h3 className="text-xl font-bold tracking-tight text-foreground">
 												Enterprise
 											</h3>
@@ -1097,7 +1097,7 @@ export const ShowBilling = () => {
 										className="w-full"
 										onValueChange={(e) => setIsAnnual(e === "annual")}
 									>
-										<TabsList className="grid w-full max-w-[14rem] grid-cols-2">
+										<TabsList className="grid w-full max-w-56 grid-cols-2">
 											<TabsTrigger value="monthly">Monthly</TabsTrigger>
 											<TabsTrigger value="annual">Annual (20% off)</TabsTrigger>
 										</TabsList>
@@ -1110,7 +1110,7 @@ export const ShowBilling = () => {
 													className={clsx(
 														"flex flex-col rounded-3xl  border-dashed border-2 px-4 max-w-sm",
 														featured
-															? "order-first  border py-8 lg:order-none"
+															? "order-first  border py-8 lg:order-0"
 															: "lg:py-8",
 													)}
 												>

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

@@ -160,7 +160,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
 				<DialogHeader>
 					<DialogTitle>
 						{certificateId ? "Update" : "Add New"} Certificate
@@ -200,7 +200,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 									<FormLabel>Certificate Data</FormLabel>
 									<FormControl>
 										<Textarea
-											className="h-32"
+											className="h-32 max-h-32 resize-none overflow-y-auto field-sizing-fixed"
 											placeholder={certificateDataHolder}
 											{...field}
 										/>
@@ -217,7 +217,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 									<FormLabel>Private Key</FormLabel>
 									<FormControl>
 										<Textarea
-											className="h-32"
+											className="h-32 max-h-32 resize-none overflow-y-auto field-sizing-fixed"
 											placeholder={privateKeyDataHolder}
 											{...field}
 										/>
@@ -292,7 +292,7 @@ export const HandleCertificate = ({ certificateId }: Props) => {
 						)}
 					</form>
 
-					<DialogFooter className="flex w-full flex-row !justify-end">
+					<DialogFooter className="flex w-full flex-row justify-end!">
 						<Button
 							isLoading={isPending}
 							form="hook-form-handle-certificate"

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

@@ -31,9 +31,9 @@ export const ShowNodeData = ({ data }: Props) => {
 						See in detail the metadata of this node
 					</DialogDescription>
 				</DialogHeader>
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card">
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-236 bg-card">
 					<code>
-						<pre className="whitespace-pre-wrap break-words">
+						<pre className="whitespace-pre-wrap wrap-break-word">
 							<CodeEditor
 								language="json"
 								lineWrapping

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

@@ -434,8 +434,8 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 
 					<DialogFooter
 						className={cn(
-							isCloud ? "!flex-col" : "flex-row",
-							"flex w-full  !justify-between gap-4",
+							isCloud ? "flex-col!" : "flex-row",
+							"flex w-full  justify-between! gap-4",
 						)}
 					>
 						{isCloud ? (

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

@@ -890,7 +890,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 															/>
 															<Label
 																htmlFor={key}
-																className="h-24 flex flex-col gap-2 items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+																className="h-24 flex flex-col gap-2 items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary has-data-[state=checked]:border-primary cursor-pointer"
 															>
 																{value.icon}
 																{value.label}
@@ -1051,7 +1051,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											name="decoration"
 											defaultValue={true}
 											render={({ field }) => (
-												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-xs">
 													<div className="space-y-0.5">
 														<FormLabel>Decoration</FormLabel>
 														<FormDescription>
@@ -1383,7 +1383,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											name="decoration"
 											defaultValue={true}
 											render={({ field }) => (
-												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-xs">
 													<div className="space-y-0.5">
 														<FormLabel>Decoration</FormLabel>
 														<FormDescription>
@@ -1591,7 +1591,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 															control={form.control}
 															name={`headers.${index}.value` as never}
 															render={({ field }) => (
-																<FormItem className="flex-[2]">
+																<FormItem className="flex-2">
 																	<FormControl>
 																		<Input placeholder="Value" {...field} />
 																	</FormControl>
@@ -1824,7 +1824,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="appDeploy"
 									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-xs gap-2">
 											<div className="">
 												<FormLabel>App Deploy</FormLabel>
 												<FormDescription>
@@ -1844,7 +1844,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-xs gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>App Build Error</FormLabel>
 												<FormDescription>
@@ -1865,7 +1865,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-xs gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Database Backup</FormLabel>
 												<FormDescription>
@@ -1886,7 +1886,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="dokployBackup"
 									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-xs gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Dokploy Backup</FormLabel>
 												<FormDescription>
@@ -1907,7 +1907,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 									control={form.control}
 									name="volumeBackup"
 									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-xs gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Volume Backup</FormLabel>
 												<FormDescription>
@@ -1928,7 +1928,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-xs gap-2">
 											<div className="space-y-0.5">
 												<FormLabel>Docker Cleanup</FormLabel>
 												<FormDescription>
@@ -1951,7 +1951,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-xs gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Dokploy Restart</FormLabel>
 													<FormDescription>
@@ -1974,7 +1974,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-xs gap-2">
 												<div className="space-y-0.5">
 													<FormLabel>Server Threshold</FormLabel>
 													<FormDescription>
@@ -1996,7 +1996,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 						</div>
 					</form>
 
-					<DialogFooter className="flex flex-row gap-2 !justify-between w-full">
+					<DialogFooter className="flex flex-row gap-2 justify-between! w-full">
 						<Button
 							isLoading={
 								isLoadingSlack ||

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

@@ -25,7 +25,12 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { InputOTP } from "@/components/ui/input-otp";
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSeparator,
+	InputOTPSlot,
+} from "@/components/ui/input-otp";
 import {
 	Tooltip,
 	TooltipContent,
@@ -426,7 +431,19 @@ export const Enable2FA = () => {
 									value={otpValue}
 									onChange={setOtpValue}
 									autoFocus
-								/>
+								>
+									<InputOTPGroup>
+										<InputOTPSlot index={0} />
+										<InputOTPSlot index={1} />
+										<InputOTPSlot index={2} />
+									</InputOTPGroup>
+									<InputOTPSeparator />
+									<InputOTPGroup>
+										<InputOTPSlot index={3} />
+										<InputOTPSlot index={4} />
+										<InputOTPSlot index={5} />
+									</InputOTPGroup>
+								</InputOTP>
 								<FormDescription>
 									Enter the 6-digit code from your authenticator app
 								</FormDescription>

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -272,7 +272,7 @@ export const ProfileForm = () => {
 																className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
 															>
 																<FormItem key="no-avatar">
-																	<FormLabel className="[&:has([data-state=checked])>.default-avatar]:border-primary [&:has([data-state=checked])>.default-avatar]:border-1 [&:has([data-state=checked])>.default-avatar]:p-px cursor-pointer">
+																	<FormLabel className="[&:has([data-state=checked])>.default-avatar]:border-primary [&:has([data-state=checked])>.default-avatar]:border [&:has([data-state=checked])>.default-avatar]:p-px cursor-pointer">
 																		<FormControl>
 																			<RadioGroupItem
 																				value=""
@@ -290,7 +290,7 @@ export const ProfileForm = () => {
 																	</FormLabel>
 																</FormItem>
 																<FormItem key="custom-upload">
-																	<FormLabel className="[&:has([data-state=checked])>.upload-avatar]:border-primary [&:has([data-state=checked])>.upload-avatar]:border-1 [&:has([data-state=checked])>.upload-avatar]:p-px cursor-pointer">
+																	<FormLabel className="[&:has([data-state=checked])>.upload-avatar]:border-primary [&:has([data-state=checked])>.upload-avatar]:border [&:has([data-state=checked])>.upload-avatar]:p-px cursor-pointer">
 																		<FormControl>
 																			<RadioGroupItem
 																				value="upload"
@@ -356,7 +356,7 @@ export const ProfileForm = () => {
 																	</FormLabel>
 																</FormItem>
 																<FormItem key="color-avatar">
-																	<FormLabel className="[&:has([data-state=checked])>.color-avatar]:border-primary [&:has([data-state=checked])>.color-avatar]:border-1 [&:has([data-state=checked])>.color-avatar]:p-px cursor-pointer relative">
+																	<FormLabel className="[&:has([data-state=checked])>.color-avatar]:border-primary [&:has([data-state=checked])>.color-avatar]:border [&:has([data-state=checked])>.color-avatar]:p-px cursor-pointer relative">
 																		<FormControl>
 																			<RadioGroupItem
 																				value="color"
@@ -391,7 +391,7 @@ export const ProfileForm = () => {
 																</FormItem>
 																{availableAvatars.map((image) => (
 																	<FormItem key={image}>
-																		<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">
+																		<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border [&:has([data-state=checked])>img]:p-px cursor-pointer">
 																			<FormControl>
 																				<RadioGroupItem
 																					value={image}
@@ -420,7 +420,7 @@ export const ProfileForm = () => {
 													control={form.control}
 													name="allowImpersonation"
 													render={({ field }) => (
-														<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+														<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-xs">
 															<div className="space-y-0.5">
 																<FormLabel>Allow Impersonation</FormLabel>
 																<FormDescription>

apps/dokploy/components/dashboard/settings/servers/actions/builds-concurrency.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+// Free tier may set up to 2 concurrent builds; enterprise unlocks more.
+const FREE_MAX_CONCURRENCY = 2;
+const ENTERPRISE_MAX_CONCURRENCY = 100;
+
+interface Props {
+	/**
+	 * When provided, configures concurrency for that remote server. When
+	 * omitted, configures the local Dokploy web server.
+	 */
+	serverId?: string;
+	/** Optional title override (e.g. the server name in a list). */
+	label?: string;
+}
+
+/**
+ * Control to set the number of concurrent builds, either for a remote server
+ * (`serverId` provided) or the local web server (omitted). Available to
+ * everyone self-hosted up to FREE_MAX_CONCURRENCY; higher values require a
+ * valid enterprise license. Not shown in cloud.
+ */
+export const BuildsConcurrency = ({ serverId, label }: Props) => {
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: haveValidLicense } =
+		api.licenseKey.haveValidLicenseKey.useQuery();
+
+	const serverQuery = api.server.one.useQuery(
+		{ serverId: serverId ?? "" },
+		{ enabled: !!serverId },
+	);
+	const webServerQuery = api.settings.getWebServerSettings.useQuery(undefined, {
+		enabled: !serverId,
+	});
+
+	const current = serverId
+		? serverQuery.data?.buildsConcurrency
+		: webServerQuery.data?.buildsConcurrency;
+	const refetch = serverId ? serverQuery.refetch : webServerQuery.refetch;
+
+	const updateServer = api.server.updateBuildsConcurrency.useMutation();
+	const updateWebServer = api.settings.updateBuildsConcurrency.useMutation();
+	const isPending = serverId
+		? updateServer.isPending
+		: updateWebServer.isPending;
+
+	const [value, setValue] = useState("1");
+
+	useEffect(() => {
+		if (current) {
+			setValue(String(current));
+		}
+	}, [current]);
+
+	// Concurrent builds are a self-hosted feature; not shown in cloud.
+	if (isCloud) return null;
+
+	const max = haveValidLicense
+		? ENTERPRISE_MAX_CONCURRENCY
+		: FREE_MAX_CONCURRENCY;
+	const clamp = (n: number) => Math.min(max, Math.max(1, n));
+
+	const handleSave = async () => {
+		const parsed = clamp(Number.parseInt(value, 10) || 1);
+		setValue(String(parsed));
+		try {
+			if (serverId) {
+				await updateServer.mutateAsync({ serverId, buildsConcurrency: parsed });
+			} else {
+				await updateWebServer.mutateAsync({ buildsConcurrency: parsed });
+			}
+			await refetch();
+			toast.success("Builds concurrency updated");
+		} catch {
+			toast.error("Error updating builds concurrency");
+		}
+	};
+
+	const hasChanges = Number(value) !== (current ?? 1);
+
+	return (
+		<div className="flex flex-col gap-3 rounded-lg border p-3">
+			<div className="flex flex-row items-center justify-between gap-4">
+				<div className="space-y-0.5">
+					<div className="flex items-center gap-2">
+						<p className="text-sm font-medium">
+							{label ?? serverQuery.data?.name ?? "Dokploy Server"}
+						</p>
+						<span className="text-xs text-muted-foreground rounded border px-1.5 py-0.5">
+							{serverId
+								? (serverQuery.data?.ipAddress ?? "remote server")
+								: "local host"}
+						</span>
+					</div>
+				</div>
+				<div className="flex items-center gap-2">
+					<Input
+						type="number"
+						min={1}
+						max={max}
+						value={value}
+						onChange={(e) => setValue(e.target.value)}
+						className="w-20"
+					/>
+					<Button
+						type="button"
+						size="sm"
+						onClick={handleSave}
+						isLoading={isPending}
+						disabled={!hasChanges}
+					>
+						Save
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};