Merge pull request #2309 from Dokploy/1778-railpack-frontend-version-is-hardcoded

1778 railpack frontend version is hardcoded

.github/workflows/deploy.yml

@@ -2,7 +2,8 @@ name: Build Docker images
 
 on:
   push:
-    branches: ["canary", "main", "feat/monitoring"]
+    branches: [main, canary]
+  workflow_dispatch:
 
 jobs:
   build-and-push-cloud-image:

.github/workflows/dokploy.yml

@@ -2,7 +2,8 @@ name: Dokploy Docker Build
 
 on:
   push:
-    branches: [main, canary, "1061-custom-docker-service-hostname"]
+    branches: [main, canary]
+  workflow_dispatch:
 
 env:
   IMAGE_NAME: dokploy/dokploy

.github/workflows/format.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup biomeJs
         uses: biomejs/setup-biome@v2  
 
       - name: Run Biome formatter
-        run:  biome format . --write
+        run:  biome format --write
 
-      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef
+      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # v1.3.2

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["biomejs.biome"]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "biomejs.biome",
+	"editor.codeActionsOnSave": {
+		"source.fixAll.biome": "explicit",
+		"source.organizeImports.biome": "explicit"
+	}
+}

Dockerfile

@@ -1,8 +1,9 @@
 # syntax=docker/dockerfile:1
-FROM node:20.9-slim AS base
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app
@@ -57,7 +58,7 @@ RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && pnpm install -g tsx
 
 # Install Railpack
-ARG RAILPACK_VERSION=0.0.64
+ARG RAILPACK_VERSION=0.2.2
 RUN curl -sSL https://railpack.com/install.sh | bash
 
 # Install buildpacks

Dockerfile.cloud

@@ -1,8 +1,9 @@
 # syntax=docker/dockerfile:1
-FROM node:20.9-slim AS base
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app

Dockerfile.schedule

@@ -1,8 +1,9 @@
 # syntax=docker/dockerfile:1
-FROM node:20.9-slim AS base
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app

Dockerfile.server

@@ -1,8 +1,9 @@
 # syntax=docker/dockerfile:1
-FROM node:20.9-slim AS base
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://dokploy.com">
-    <img src=".github/sponsors/logo.png" alt="Dokploy - Open Source Alternative to Vercel, Heroku and Netlify." align="center" width="100%"  />
+    <img src=".github/sponsors/logo.png" alt="Dokploy - Open Source Alternative to Vercel, Heroku and Netlify." width="100%"  />
   </a>
   </br>
   </br>
@@ -13,7 +13,7 @@
 
 Dokploy is a free, self-hostable Platform as a Service (PaaS) that simplifies the deployment and management of applications and databases.
 
-### Features
+## ✨ Features
 
 Dokploy includes multiple features to make your life easier.
 
@@ -43,7 +43,7 @@ curl -sSL https://dokploy.com/install.sh | sh
 
 For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
-## Sponsors
+## ♥️ Sponsors
 
 🙏 We're deeply grateful to all our sponsors who make Dokploy possible! Your support helps cover the costs of hosting, testing, and developing new features.
 
@@ -60,8 +60,6 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 <div>
   <a href="https://www.hostinger.com/vps-hosting?ref=dokploy"><img src=".github/sponsors/hostinger.jpg" alt="Hostinger" width="300"/></a>
   <a href="https://www.lxaer.com/?ref=dokploy"><img src=".github/sponsors/lxaer.png" alt="LX Aer" width="100"/></a>
-  <a href="https://mandarin3d.com/?ref=dokploy"><img src=".github/sponsors/mandarin.png" alt="Mandarin" width="100"/></a>
-  <a href="https://lightnode.com/?ref=dokploy"><img src=".github/sponsors/light-node.webp" alt="Lightnode" width="300"/></a>
 </div>
 
 <!-- Premium Supporters 🥇 -->
@@ -89,25 +87,17 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 ### Supporting Members 🥉
 
 <div>
-  <a href="https://lightspeed.run/?ref=dokploy"><img src="https://github.com/lightspeedrun.png" width="60px" alt="Lightspeed.run"/></a>
+
   <a href="https://cloudblast.io/?ref=dokploy"><img src="https://cloudblast.io/img/logo-icon.193cf13e.svg" width="250px" alt="Cloudblast.io"/></a>
-  <a href="https://startupfa.me/?ref=dokploy"><img src=".github/sponsors/startupfame.png" width="65px" alt="Startupfame"/></a>
-  <a href="https://itsdb-center.com?ref=dokploy"><img src=".github/sponsors/its.png" width="65px" alt="Itsdb-center"/></a>
-  <a href="https://openalternative.co/?ref=dokploy"><img src=".github/sponsors/openalternative.png" width="65px" alt="Openalternative"/></a>
+
   <a href="https://synexa.ai/?ref=dokploy"><img src=".github/sponsors/synexa.png" width="65px" alt="Synexa"/></a>
 </div>
 
 ### Community Backers 🤝
 
-<div>
-  <a href="https://steamsets.com/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/111978405?s=200&v=4" width="60px" alt="Steamsets.com"/></a>
-  <a href="https://rivo.gg/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/126797452?s=200&v=4" width="60px" alt="Rivo.gg"/></a>
-  <a href="https://photoquest.wedding/?ref=dokploy"><img src="https://photoquest.wedding/favicon/android-chrome-512x512.png" width="60px" alt="Rivo.gg"/></a>
-</div>
-
 #### Organizations:
 
-[![Sponsors on Open Collective](https://opencollective.com/dokploy/organizations.svg?width=890)](https://opencollective.com/dokploy)
+[Sponsors on Open Collective](https://opencollective.com/dokploy)
 
 #### Individuals:
 
@@ -116,15 +106,15 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 ### Contributors 🤝
 
 <a href="https://github.com/dokploy/dokploy/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=dokploy/dokploy" />
+  <img src="https://contrib.rocks/image?repo=dokploy/dokploy" alt="Contributors" />
 </a>
 
-## Video Tutorial
+## 📺 Video Tutorial
 
 <a href="https://youtu.be/mznYKPvhcfw">
   <img src="https://dokploy.com/banner.png" alt="Watch the video" width="400"/>
 </a>
 
-## Contributing
+## 🤝 Contributing
 
 Check out the [Contributing Guide](CONTRIBUTING.md) for more information.

apps/api/package.json

@@ -10,24 +10,28 @@
 	},
 	"dependencies": {
 		"@dokploy/server": "workspace:*",
-		"@hono/node-server": "^1.12.1",
+		"@hono/node-server": "^1.14.3",
 		"@hono/zod-validator": "0.3.0",
 		"@nerimity/mimiqueue": "1.2.3",
-		"dotenv": "^16.3.1",
-		"hono": "^4.5.8",
+		"dotenv": "^16.4.5",
+		"hono": "^4.7.10",
 		"pino": "9.4.0",
 		"pino-pretty": "11.2.2",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"redis": "4.7.0",
-		"zod": "^3.23.4"
+		"zod": "^3.25.32"
 	},
 	"devDependencies": {
-		"@types/node": "^20.11.17",
+		"@types/node": "^20.17.51",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.15",
-		"tsx": "^4.7.1",
-		"typescript": "^5.4.2"
+		"tsx": "^4.16.2",
+		"typescript": "^5.8.3"
 	},
-	"packageManager": "pnpm@9.5.0"
+	"packageManager": "pnpm@9.12.0",
+	"engines": {
+		"node": "^20.16.0",
+		"pnpm": ">=9.12.0"
+	}
 }

apps/dokploy/__test__/compose/compose.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllProperties } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllProperties } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToConfigsRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToConfigsRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-service.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToConfigsInServices } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToConfigsInServices,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToAllConfigs } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllConfigs, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/domain/labels.test.ts

@@ -108,4 +108,136 @@ describe("createDomainLabels", () => {
 			"traefik.http.services.test-app-1-web.loadbalancer.server.port=3000",
 		);
 	});
+
+	it("should add stripPath middleware when stripPath is enabled", async () => {
+		const stripPathDomain = {
+			...baseDomain,
+			path: "/api",
+			stripPath: true,
+		};
+		const labels = await createDomainLabels(appName, stripPathDomain, "web");
+
+		expect(labels).toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(labels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=stripprefix-test-app-1",
+		);
+	});
+
+	it("should add internalPath middleware when internalPath is set", async () => {
+		const internalPathDomain = {
+			...baseDomain,
+			internalPath: "/hello",
+		};
+		const webLabels = await createDomainLabels(
+			appName,
+			internalPathDomain,
+			"web",
+		);
+		const websecureLabels = await createDomainLabels(
+			appName,
+			internalPathDomain,
+			"websecure",
+		);
+
+		// Middleware definition should only appear in web entrypoint
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+
+		// Both routers should reference the middleware
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=addprefix-test-app-1",
+		);
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
+		);
+	});
+
+	it("should combine HTTPS redirect with internalPath middleware in correct order", async () => {
+		const combinedDomain = {
+			...baseDomain,
+			https: true,
+			internalPath: "/hello",
+		};
+		const webLabels = await createDomainLabels(appName, combinedDomain, "web");
+		const websecureLabels = await createDomainLabels(
+			appName,
+			combinedDomain,
+			"websecure",
+		);
+
+		// Web entrypoint should have both middlewares with redirect first
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,addprefix-test-app-1",
+		);
+
+		// Websecure should only have the addprefix middleware
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
+		);
+
+		// Middleware definition should only appear once (in web)
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+	});
+
+	it("should combine all middlewares in correct order", async () => {
+		const fullDomain = {
+			...baseDomain,
+			https: true,
+			path: "/api",
+			stripPath: true,
+			internalPath: "/hello",
+		};
+		const webLabels = await createDomainLabels(appName, fullDomain, "web");
+
+		// Should have all middleware definitions (only in web)
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+
+		// Should have middlewares in correct order: redirect, stripprefix, addprefix
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,stripprefix-test-app-1,addprefix-test-app-1",
+		);
+	});
+
+	it("should not add middleware definitions for websecure entrypoint", async () => {
+		const internalPathDomain = {
+			...baseDomain,
+			path: "/api",
+			stripPath: true,
+			internalPath: "/hello",
+		};
+		const websecureLabels = await createDomainLabels(
+			appName,
+			internalPathDomain,
+			"websecure",
+		);
+
+		// Should not contain any middleware definitions
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(websecureLabels).not.toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+
+		// But should reference the middlewares
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=stripprefix-test-app-1,addprefix-test-app-1",
+		);
+	});
 });

apps/dokploy/__test__/compose/network/network-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToNetworksRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToNetworksRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network-service.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNetworks } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToServiceNetworks,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network.test.ts

@@ -1,10 +1,10 @@
-import { generateRandomHash } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import {
 	addSuffixToAllNetworks,
+	addSuffixToNetworksRoot,
 	addSuffixToServiceNetworks,
+	generateRandomHash,
 } from "@dokploy/server";
-import { addSuffixToNetworksRoot } from "@dokploy/server";
-import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToSecretsRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToSecretsRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-services.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToSecretsInServices } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToSecretsInServices,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllSecrets } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllSecrets } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-container-name.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-depends-on.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-extends.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-links.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-names.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service.test.ts

@@ -1,8 +1,8 @@
+import type { ComposeSpecification } from "@dokploy/server";
 import {
 	addSuffixToAllServiceNames,
 	addSuffixToServiceNames,
 } from "@dokploy/server";
-import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/sevice-volumes-from.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToServiceNames } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToServiceNames, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-2.test.ts

@@ -1,6 +1,9 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToAllVolumes, addSuffixToVolumesRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToAllVolumes,
+	addSuffixToVolumesRoot,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-root.test.ts

@@ -1,6 +1,5 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToVolumesRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToVolumesRoot, generateRandomHash } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-services.test.ts

@@ -1,6 +1,8 @@
-import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToVolumesInServices } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import {
+	addSuffixToVolumesInServices,
+	generateRandomHash,
+} from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllVolumes } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
+import { addSuffixToAllVolumes } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/deploy/github.test.ts

@@ -1,5 +1,5 @@
-import { extractCommitMessage } from "@/pages/api/deploy/[refreshToken]";
 import { describe, expect, it } from "vitest";
+import { extractCommitMessage } from "@/pages/api/deploy/[refreshToken]";
 
 describe("GitHub Webhook Skip CI", () => {
 	const mockGithubHeaders = {

apps/dokploy/__test__/drop/drop.test.ts

@@ -1,12 +1,12 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { paths } from "@dokploy/server/constants";
-const { APPLICATIONS_PATH } = paths();
 import type { ApplicationNested } from "@dokploy/server";
 import { unzipDrop } from "@dokploy/server";
+import { paths } from "@dokploy/server/constants";
 import AdmZip from "adm-zip";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 
+const { APPLICATIONS_PATH } = paths();
 vi.mock("@dokploy/server/constants", async (importOriginal) => {
 	const actual = await importOriginal();
 	return {
@@ -25,10 +25,12 @@ if (typeof window === "undefined") {
 }
 
 const baseApp: ApplicationNested = {
+	railpackVersion: "0.2.2",
 	applicationId: "",
 	herokuVersion: "",
 	giteaBranch: "",
 	giteaBuildPath: "",
+	previewRequireCollaboratorPermissions: false,
 	giteaId: "",
 	giteaOwner: "",
 	giteaRepository: "",
@@ -141,7 +143,7 @@ describe("unzipDrop using real zip files", () => {
 			const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 			const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
 			console.log(`Output Path: ${outputPath}`);
-			const zipBuffer = zip.toBuffer();
+			const zipBuffer = zip.toBuffer() as Buffer<ArrayBuffer>;
 			const file = new File([zipBuffer], "single.zip");
 			await unzipDrop(file, baseApp);
 			const files = await fs.readdir(outputPath, { withFileTypes: true });

apps/dokploy/__test__/requests/request.test.ts

@@ -1,5 +1,6 @@
 import { parseRawConfig, processLogs } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
+
 const sampleLogEntry = `{"ClientAddr":"172.19.0.1:56732","ClientHost":"172.19.0.1","ClientPort":"56732","ClientUsername":"-","DownstreamContentSize":0,"DownstreamStatus":304,"Duration":14729375,"OriginContentSize":0,"OriginDuration":14051833,"OriginStatus":304,"Overhead":677542,"RequestAddr":"s222-umami-c381af.traefik.me","RequestContentSize":0,"RequestCount":122,"RequestHost":"s222-umami-c381af.traefik.me","RequestMethod":"GET","RequestPath":"/dashboard?_rsc=1rugv","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-umami-60e104-47-web@docker","ServiceAddr":"10.0.1.15:3000","ServiceName":"s222-umami-60e104-47-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.15:3000","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T04:34:37.306691884Z","StartUTC":"2024-08-25T04:34:37.306691884Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T04:34:37Z"}`;
 
 describe("processLogs", () => {

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -1,10 +1,9 @@
-import type { Domain } from "@dokploy/server";
-import type { Redirect } from "@dokploy/server";
-import type { ApplicationNested } from "@dokploy/server";
+import type { ApplicationNested, Domain, Redirect } from "@dokploy/server";
 import { createRouterConfig } from "@dokploy/server";
 import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {
+	railpackVersion: "0.2.2",
 	rollbackActive: false,
 	applicationId: "",
 	herokuVersion: "",
@@ -18,6 +17,7 @@ const baseApp: ApplicationNested = {
 	appName: "",
 	autoDeploy: true,
 	enableSubmodules: false,
+	previewRequireCollaboratorPermissions: false,
 	serverId: "",
 	branch: null,
 	dockerBuildStage: "",

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

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

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

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

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

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

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

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

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

@@ -114,7 +114,7 @@ export const HandleSecurity = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>
@@ -151,7 +151,7 @@ export const HandleSecurity = ({
 									<FormItem>
 										<FormLabel>Password</FormLabel>
 										<FormControl>
-											<Input placeholder="test" {...field} />
+											<Input placeholder="test" type="password" {...field} />
 										</FormControl>
 
 										<FormMessage />

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

@@ -7,6 +7,9 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { LockKeyhole, Trash2 } from "lucide-react";
 import { toast } from "sonner";
@@ -58,19 +61,18 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 						<div className="flex flex-col gap-6 ">
 							{data?.security.map((security) => (
 								<div key={security.securityId}>
-									<div className="flex w-full flex-col sm:flex-row justify-between sm:items-center gap-4 sm:gap-10 border rounded-lg p-4">
-										<div className="grid grid-cols-1 sm:grid-cols-2 flex-col gap-4 sm:gap-8">
-											<div className="flex flex-col gap-1">
-												<span className="font-medium">Username</span>
-												<span className="text-sm text-muted-foreground">
-													{security.username}
-												</span>
+									<div className="flex w-full flex-col md:flex-row justify-between md:items-center gap-4 md:gap-10 border rounded-lg p-4">
+										<div className="grid grid-cols-1 md:grid-cols-2 flex-col gap-4 md:gap-8">
+											<div className="flex flex-col gap-2">
+												<Label>Username</Label>
+												<Input disabled value={security.username} />
 											</div>
-											<div className="flex flex-col gap-1">
-												<span className="font-medium">Password</span>
-												<span className="text-sm text-muted-foreground">
-													{security.password}
-												</span>
+											<div className="flex flex-col gap-2">
+												<Label>Password</Label>
+												<ToggleVisibilityInput
+													value={security.password}
+													disabled
+												/>
 											</div>
 										</div>
 										<div className="flex flex-row gap-2">

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

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

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

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

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

@@ -1,3 +1,5 @@
+import { Package, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
@@ -9,11 +11,10 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Package, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";
 import { UpdateVolume } from "./update-volume";
+
 interface Props {
 	id: string;
 	type: ServiceType | "compose";
@@ -80,7 +81,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
 									>
 										{/* <Package className="size-8 self-center text-muted-foreground" /> */}
-										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
 											<div className="flex flex-col gap-1">
 												<span className="font-medium">Mount Type</span>
 												<span className="text-sm text-muted-foreground">
@@ -112,21 +113,21 @@ export const ShowVolumes = ({ id, type }: Props) => {
 													</span>
 												</div>
 											)}
-											{mount.type === "file" ? (
+											{mount.type === "file" && (
 												<div className="flex flex-col gap-1">
 													<span className="font-medium">File Path</span>
 													<span className="text-sm text-muted-foreground">
 														{mount.filePath}
 													</span>
 												</div>
-											) : (
-												<div className="flex flex-col gap-1">
-													<span className="font-medium">Mount Path</span>
-													<span className="text-sm text-muted-foreground">
-														{mount.mountPath}
-													</span>
-												</div>
 											)}
+
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
 										</div>
 										<div className="flex flex-row gap-1">
 											<UpdateVolume

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

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

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Cog } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,12 +21,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Cog } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 export enum BuildType {
 	dockerfile = "dockerfile",
@@ -65,6 +65,7 @@ const mySchema = z.discriminatedUnion("buildType", [
 	}),
 	z.object({
 		buildType: z.literal(BuildType.railpack),
+		railpackVersion: z.string().nullable().default("0.2.2"),
 	}),
 	z.object({
 		buildType: z.literal(BuildType.static),
@@ -86,6 +87,7 @@ interface ApplicationData {
 	herokuVersion?: string | null;
 	publishDirectory?: string | null;
 	isStaticSpa?: boolean | null;
+	railpackVersion?: string | null | undefined;
 }
 
 function isValidBuildType(value: string): value is BuildType {
@@ -123,6 +125,7 @@ const resetData = (data: ApplicationData): AddTemplate => {
 		case BuildType.railpack:
 			return {
 				buildType: BuildType.railpack,
+				railpackVersion: data.railpackVersion || null,
 			};
 		default: {
 			const buildType = data.buildType as BuildType;
@@ -181,6 +184,10 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 					: null,
 			isStaticSpa:
 				data.buildType === BuildType.static ? data.isStaticSpa : null,
+			railpackVersion:
+				data.buildType === BuildType.railpack
+					? data.railpackVersion || "0.2.2"
+					: null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -395,6 +402,25 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								)}
 							/>
 						)}
+						{buildType === BuildType.railpack && (
+							<FormField
+								control={form.control}
+								name="railpackVersion"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Railpack Version</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Railpack Version"
+												{...field}
+												value={field.value ?? ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						<div className="flex w-full justify-end">
 							<Button isLoading={isLoading} type="submit">
 								Save

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

@@ -124,7 +124,7 @@ export const ShowDeployment = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription className="flex items-center gap-2">

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

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

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

@@ -1,4 +1,5 @@
 import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -10,14 +11,13 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { type RouterOutputs, api } from "@/utils/api";
-import { Clock, Loader2, RocketIcon, Settings, RefreshCcw } from "lucide-react";
+import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react";
 import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";
 import { ShowDeployment } from "./show-deployment";
-import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { toast } from "sonner";
 
 interface Props {
 	id: string;

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

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

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,14 +41,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import Link from "next/link";
-import z from "zod";
 
 export type CacheType = "fetch" | "cache";
 
@@ -123,6 +122,7 @@ interface Props {
 export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [cacheType, setCacheType] = useState<CacheType>("cache");
+	const [isManualInput, setIsManualInput] = useState(false);
 
 	const utils = api.useUtils();
 	const { data, refetch } = api.domain.one.useQuery(
@@ -292,7 +292,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
@@ -325,46 +325,126 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 													<FormItem className="w-full">
 														<FormLabel>Service Name</FormLabel>
 														<div className="flex gap-2">
-															<Select
-																onValueChange={field.onChange}
-																defaultValue={field.value || ""}
-															>
+															{isManualInput ? (
 																<FormControl>
-																	<SelectTrigger>
-																		<SelectValue placeholder="Select a service name" />
-																	</SelectTrigger>
+																	<Input
+																		placeholder="Enter service name manually"
+																		{...field}
+																		className="w-full"
+																	/>
 																</FormControl>
+															) : (
+																<Select
+																	onValueChange={field.onChange}
+																	defaultValue={field.value || ""}
+																>
+																	<FormControl>
+																		<SelectTrigger>
+																			<SelectValue placeholder="Select a service name" />
+																		</SelectTrigger>
+																	</FormControl>
 
-																<SelectContent>
-																	{services?.map((service, index) => (
-																		<SelectItem
-																			value={service}
-																			key={`${service}-${index}`}
-																		>
-																			{service}
+																	<SelectContent>
+																		{services?.map((service, index) => (
+																			<SelectItem
+																				value={service}
+																				key={`${service}-${index}`}
+																			>
+																				{service}
+																			</SelectItem>
+																		))}
+																		<SelectItem value="none" disabled>
+																			Empty
 																		</SelectItem>
-																	))}
-																	<SelectItem value="none" disabled>
-																		Empty
-																	</SelectItem>
-																</SelectContent>
-															</Select>
+																	</SelectContent>
+																</Select>
+															)}
+															{!isManualInput && (
+																<>
+																	<TooltipProvider delayDuration={0}>
+																		<Tooltip>
+																			<TooltipTrigger asChild>
+																				<Button
+																					variant="secondary"
+																					type="button"
+																					isLoading={isLoadingServices}
+																					onClick={() => {
+																						if (cacheType === "fetch") {
+																							refetchServices();
+																						} else {
+																							setCacheType("fetch");
+																						}
+																					}}
+																				>
+																					<RefreshCw className="size-4 text-muted-foreground" />
+																				</Button>
+																			</TooltipTrigger>
+																			<TooltipContent
+																				side="left"
+																				sideOffset={5}
+																				className="max-w-[10rem]"
+																			>
+																				<p>
+																					Fetch: Will clone the repository and
+																					load the services
+																				</p>
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+																	<TooltipProvider delayDuration={0}>
+																		<Tooltip>
+																			<TooltipTrigger asChild>
+																				<Button
+																					variant="secondary"
+																					type="button"
+																					isLoading={isLoadingServices}
+																					onClick={() => {
+																						if (cacheType === "cache") {
+																							refetchServices();
+																						} else {
+																							setCacheType("cache");
+																						}
+																					}}
+																				>
+																					<DatabaseZap className="size-4 text-muted-foreground" />
+																				</Button>
+																			</TooltipTrigger>
+																			<TooltipContent
+																				side="left"
+																				sideOffset={5}
+																				className="max-w-[10rem]"
+																			>
+																				<p>
+																					Cache: If you previously deployed this
+																					compose, it will read the services
+																					from the last deployment/fetch from
+																					the repository
+																				</p>
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+																</>
+															)}
 															<TooltipProvider delayDuration={0}>
 																<Tooltip>
 																	<TooltipTrigger asChild>
 																		<Button
 																			variant="secondary"
 																			type="button"
-																			isLoading={isLoadingServices}
 																			onClick={() => {
-																				if (cacheType === "fetch") {
-																					refetchServices();
-																				} else {
-																					setCacheType("fetch");
+																				setIsManualInput(!isManualInput);
+																				if (!isManualInput) {
+																					field.onChange("");
 																				}
 																			}}
 																		>
-																			<RefreshCw className="size-4 text-muted-foreground" />
+																			{isManualInput ? (
+																				<RefreshCw className="size-4 text-muted-foreground" />
+																			) : (
+																				<span className="text-xs text-muted-foreground">
+																					Manual
+																				</span>
+																			)}
 																		</Button>
 																	</TooltipTrigger>
 																	<TooltipContent
@@ -373,40 +453,9 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																		className="max-w-[10rem]"
 																	>
 																		<p>
-																			Fetch: Will clone the repository and load
-																			the services
-																		</p>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-															<TooltipProvider delayDuration={0}>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Button
-																			variant="secondary"
-																			type="button"
-																			isLoading={isLoadingServices}
-																			onClick={() => {
-																				if (cacheType === "cache") {
-																					refetchServices();
-																				} else {
-																					setCacheType("cache");
-																				}
-																			}}
-																		>
-																			<DatabaseZap className="size-4 text-muted-foreground" />
-																		</Button>
-																	</TooltipTrigger>
-																	<TooltipContent
-																		side="left"
-																		sideOffset={5}
-																		className="max-w-[10rem]"
-																	>
-																		<p>
-																			Cache: If you previously deployed this
-																			compose, it will read the services from
-																			the last deployment/fetch from the
-																			repository
+																			{isManualInput
+																				? "Switch to service selection"
+																				: "Enter service name manually"}
 																		</p>
 																	</TooltipContent>
 																</Tooltip>

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

@@ -43,7 +43,7 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
 import Link from "next/link";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -96,6 +96,16 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 	const repository = form.watch("repository");
 	const gitlabId = form.watch("gitlabId");
 
+	const gitlabUrl = useMemo(() => {
+		const url = gitlabProviders?.find(
+			(provider) => provider.gitlabId === gitlabId,
+		)?.gitlabUrl;
+
+		const gitlabUrl = url?.replace(/\/$/, "");
+
+		return gitlabUrl || "https://gitlab.com";
+	}, [gitlabId, gitlabProviders]);
+
 	const {
 		data: repositories,
 		isLoading: isLoadingRepositories,
@@ -224,7 +234,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 										<FormLabel>Repository</FormLabel>
 										{field.value.owner && field.value.repo && (
 											<Link
-												href={`https://gitlab.com/${field.value.owner}/${field.value.repo}`}
+												href={`${gitlabUrl}/${field.value.owner}/${field.value.repo}`}
 												target="_blank"
 												rel="noopener noreferrer"
 												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"

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

@@ -153,8 +153,8 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full gap-4">
-						<TabsList className="md:grid md:w-fit md:grid-cols-7 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
+					<div className="flex flex-row items-center justify-between w-full overflow-auto">
+						<TabsList 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/preview-deployments/add-preview-domain.tsx

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

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

@@ -46,6 +46,7 @@ const schema = z
 		previewPath: z.string(),
 		previewCertificateType: z.enum(["letsencrypt", "none", "custom"]),
 		previewCustomCertResolver: z.string().optional(),
+		previewRequireCollaboratorPermissions: z.boolean(),
 	})
 	.superRefine((input, ctx) => {
 		if (
@@ -83,6 +84,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewHttps: false,
 			previewPath: "/",
 			previewCertificateType: "none",
+			previewRequireCollaboratorPermissions: true,
 		},
 		resolver: zodResolver(schema),
 	});
@@ -105,6 +107,8 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				previewPath: data.previewPath || "/",
 				previewCertificateType: data.previewCertificateType || "none",
 				previewCustomCertResolver: data.previewCustomCertResolver || "",
+				previewRequireCollaboratorPermissions:
+					data.previewRequireCollaboratorPermissions || true,
 			});
 		}
 	}, [data]);
@@ -121,6 +125,8 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewPath: formData.previewPath,
 			previewCertificateType: formData.previewCertificateType,
 			previewCustomCertResolver: formData.previewCustomCertResolver,
+			previewRequireCollaboratorPermissions:
+				formData.previewRequireCollaboratorPermissions,
 		})
 			.then(() => {
 				toast.success("Preview Deployments settings updated");
@@ -138,7 +144,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 						Configure
 					</Button>
 				</DialogTrigger>
-				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
+				<DialogContent className="sm:max-w-5xl w-full">
 					<DialogHeader>
 						<DialogTitle>Preview Deployment Settings</DialogTitle>
 						<DialogDescription>
@@ -312,6 +318,37 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 									</div>
 								</div>
 
+								<div className="grid gap-4 lg:grid-cols-2">
+									<FormField
+										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">
+												<div className="space-y-0.5">
+													<FormLabel>
+														Require Collaborator Permissions
+													</FormLabel>
+													<FormDescription>
+														Require collaborator permissions to preview
+														deployments, valid roles are:
+														<ul>
+															<li>Admin</li>
+															<li>Maintain</li>
+															<li>Write</li>
+														</ul>
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+
 								<FormField
 									control={form.control}
 									name="env"

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -42,9 +43,8 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { formatBytes } from "../../database/backups/restore-backup";
-import { AlertBlock } from "@/components/shared/alert-block";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	id: string;
@@ -161,7 +161,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 					Restore Volume Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />

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

@@ -23,8 +23,8 @@ import {
 	Trash2,
 } from "lucide-react";
 import { toast } from "sonner";
-import { HandleVolumeBackups } from "./handle-volume-backups";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
+import { HandleVolumeBackups } from "./handle-volume-backups";
 import { RestoreVolumeBackups } from "./restore-volume-backups";
 
 interface Props {
@@ -113,7 +113,7 @@ export const ShowVolumeBackups = ({
 							return (
 								<div
 									key={volumeBackup.volumeBackupId}
-									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">

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

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

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

@@ -1,3 +1,4 @@
+import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
 import {
 	BitbucketIcon,
 	GitIcon,
@@ -11,6 +12,7 @@ import { api } from "@/utils/api";
 import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";
@@ -18,8 +20,6 @@ import { SaveGitProviderCompose } from "./save-git-provider-compose";
 import { SaveGiteaProviderCompose } from "./save-gitea-provider-compose";
 import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 import { SaveGitlabProviderCompose } from "./save-gitlab-provider-compose";
-import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
-import { toast } from "sonner";
 
 type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea";
 interface Props {
@@ -142,8 +142,8 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full gap-4">
-						<TabsList className="md:grid md:w-fit md:grid-cols-6 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
+					<div className="flex flex-row items-center justify-between w-full overflow-auto">
+						<TabsList 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/show-converted-compose.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Folder, HelpCircle } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -37,12 +43,6 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Folder, HelpCircle } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const AddTemplateSchema = z.object({
 	name: z.string().min(1, {
@@ -75,6 +75,8 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 	const slug = slugify(projectName);
 	const { data: servers } = api.server.withSSHKey.useQuery();
 
+	const hasServers = servers && servers.length > 0;
+
 	const { mutateAsync, isLoading, error, isError } =
 		api.application.create.useMutation();
 
@@ -119,7 +121,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 					<span>Application</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Create</DialogTitle>
 					<DialogDescription>
@@ -155,68 +157,84 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="serverId"
-							render={({ field }) => (
-								<FormItem>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server {!isCloud ? "(Optional)" : ""}
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormLabel>
-											</TooltipTrigger>
-											<TooltipContent
-												className="z-[999] w-[300px]"
-												align="start"
-												side="top"
-											>
-												<span>
-													If no server is selected, the application will be
-													deployed on the server where the user is logged in.
-												</span>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
+						{hasServers && (
+							<FormField
+								control={form.control}
+								name="serverId"
+								render={({ field }) => (
+									<FormItem>
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+														Select a Server {!isCloud ? "(Optional)" : ""}
+														<HelpCircle className="size-4 text-muted-foreground" />
+													</FormLabel>
+												</TooltipTrigger>
+												<TooltipContent
+													className="z-[999] w-[300px]"
+													align="start"
+													side="top"
+												>
+													<span>
+														If no server is selected, the application will be
+														deployed on the server where the user is logged in.
+													</span>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
 
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-									>
-										<SelectTrigger>
-											<SelectValue placeholder="Select a Server" />
-										</SelectTrigger>
-										<SelectContent>
-											<SelectGroup>
-												{servers?.map((server) => (
-													<SelectItem
-														key={server.serverId}
-														value={server.serverId}
-													>
-														<span className="flex items-center gap-2 justify-between w-full">
-															<span>{server.name}</span>
-															<span className="text-muted-foreground text-xs self-center">
-																{server.ipAddress}
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Server" />
+											</SelectTrigger>
+											<SelectContent>
+												<SelectGroup>
+													{servers?.map((server) => (
+														<SelectItem
+															key={server.serverId}
+															value={server.serverId}
+														>
+															<span className="flex items-center gap-2 justify-between w-full">
+																<span>{server.name}</span>
+																<span className="text-muted-foreground text-xs self-center">
+																	{server.ipAddress}
+																</span>
 															</span>
-														</span>
-													</SelectItem>
-												))}
-												<SelectLabel>Servers ({servers?.length})</SelectLabel>
-											</SelectGroup>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+														</SelectItem>
+													))}
+													<SelectLabel>Servers ({servers?.length})</SelectLabel>
+												</SelectGroup>
+											</SelectContent>
+										</Select>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						<FormField
 							control={form.control}
 							name="appName"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>App Name</FormLabel>
+									<FormLabel className="flex items-center gap-2">
+										App Name
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</TooltipTrigger>
+												<TooltipContent side="right">
+													<p>
+														This will be the name of the Docker Swarm service
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</FormLabel>
 									<FormControl>
 										<Input placeholder="my-app" {...field} />
 									</FormControl>

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircuitBoard, HelpCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -37,12 +43,6 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CircuitBoard, HelpCircle } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const AddComposeSchema = z.object({
 	composeType: z.enum(["docker-compose", "stack"]).optional(),
@@ -78,6 +78,8 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 	const { mutateAsync, isLoading, error, isError } =
 		api.compose.create.useMutation();
 
+	const hasServers = servers && servers.length > 0;
+
 	const form = useForm<AddCompose>({
 		defaultValues: {
 			name: "",
@@ -124,7 +126,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 					<span>Compose</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-xl">
+			<DialogContent className="sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>Create Compose</DialogTitle>
 					<DialogDescription>
@@ -163,62 +165,64 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 								)}
 							/>
 						</div>
-						<FormField
-							control={form.control}
-							name="serverId"
-							render={({ field }) => (
-								<FormItem>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server {!isCloud ? "(Optional)" : ""}
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormLabel>
-											</TooltipTrigger>
-											<TooltipContent
-												className="z-[999] w-[300px]"
-												align="start"
-												side="top"
-											>
-												<span>
-													If no server is selected, the application will be
-													deployed on the server where the user is logged in.
-												</span>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
+						{hasServers && (
+							<FormField
+								control={form.control}
+								name="serverId"
+								render={({ field }) => (
+									<FormItem>
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+														Select a Server {!isCloud ? "(Optional)" : ""}
+														<HelpCircle className="size-4 text-muted-foreground" />
+													</FormLabel>
+												</TooltipTrigger>
+												<TooltipContent
+													className="z-[999] w-[300px]"
+													align="start"
+													side="top"
+												>
+													<span>
+														If no server is selected, the application will be
+														deployed on the server where the user is logged in.
+													</span>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
 
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-									>
-										<SelectTrigger>
-											<SelectValue placeholder="Select a Server" />
-										</SelectTrigger>
-										<SelectContent>
-											<SelectGroup>
-												{servers?.map((server) => (
-													<SelectItem
-														key={server.serverId}
-														value={server.serverId}
-													>
-														<span className="flex items-center gap-2 justify-between w-full">
-															<span>{server.name}</span>
-															<span className="text-muted-foreground text-xs self-center">
-																{server.ipAddress}
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Server" />
+											</SelectTrigger>
+											<SelectContent>
+												<SelectGroup>
+													{servers?.map((server) => (
+														<SelectItem
+															key={server.serverId}
+															value={server.serverId}
+														>
+															<span className="flex items-center gap-2 justify-between w-full">
+																<span>{server.name}</span>
+																<span className="text-muted-foreground text-xs self-center">
+																	{server.ipAddress}
+																</span>
 															</span>
-														</span>
-													</SelectItem>
-												))}
-												<SelectLabel>Servers ({servers?.length})</SelectLabel>
-											</SelectGroup>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+														</SelectItem>
+													))}
+													<SelectLabel>Servers ({servers?.length})</SelectLabel>
+												</SelectGroup>
+											</SelectContent>
+										</Select>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						<FormField
 							control={form.control}
 							name="appName"

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Database, HelpCircle } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -37,14 +43,14 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Database } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 type DbType = typeof mySchema._type.type;
 
@@ -163,6 +169,8 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 	const mariadbMutation = api.mariadb.create.useMutation();
 	const mysqlMutation = api.mysql.create.useMutation();
 
+	const hasServers = servers && servers.length > 0;
+
 	const form = useForm<AddDatabase>({
 		defaultValues: {
 			type: "postgres",
@@ -283,7 +291,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 					<span>Database</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen md:max-h-[90vh]  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Databases</DialogTitle>
 				</DialogHeader>
@@ -374,45 +382,62 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 										</FormItem>
 									)}
 								/>
-								<FormField
-									control={form.control}
-									name="serverId"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Select a Server</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												defaultValue={field.value || ""}
-											>
-												<SelectTrigger>
-													<SelectValue placeholder="Select a Server" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectGroup>
-														{servers?.map((server) => (
-															<SelectItem
-																key={server.serverId}
-																value={server.serverId}
-															>
-																{server.name}
-															</SelectItem>
-														))}
-														<SelectLabel>
-															Servers ({servers?.length})
-														</SelectLabel>
-													</SelectGroup>
-												</SelectContent>
-											</Select>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
+								{hasServers && (
+									<FormField
+										control={form.control}
+										name="serverId"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Select a Server</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a Server" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															{servers?.map((server) => (
+																<SelectItem
+																	key={server.serverId}
+																	value={server.serverId}
+																>
+																	{server.name}
+																</SelectItem>
+															))}
+															<SelectLabel>
+																Servers ({servers?.length})
+															</SelectLabel>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
 								<FormField
 									control={form.control}
 									name="appName"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>App Name</FormLabel>
+											<FormLabel className="flex items-center gap-2">
+												App Name
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<HelpCircle className="size-4 text-muted-foreground" />
+														</TooltipTrigger>
+														<TooltipContent side="right">
+															<p>
+																This will be the name of the Docker Swarm
+																service
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</FormLabel>
 											<FormControl>
 												<Input placeholder="my-app" {...field} />
 											</FormControl>

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

@@ -1,3 +1,18 @@
+import {
+	BookText,
+	CheckIcon,
+	ChevronsUpDown,
+	Globe,
+	HelpCircle,
+	LayoutGrid,
+	List,
+	Loader2,
+	PuzzleIcon,
+	SearchIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
@@ -54,21 +69,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import {
-	BookText,
-	CheckIcon,
-	ChevronsUpDown,
-	Globe,
-	HelpCircle,
-	LayoutGrid,
-	List,
-	Loader2,
-	PuzzleIcon,
-	SearchIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 
 const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
 
@@ -137,6 +137,8 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 			return matchesTags && matchesQuery;
 		}) || [];
 
+	const hasServers = servers && servers.length > 0;
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="w-full">
@@ -148,7 +150,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 					<span>Template</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen sm:max-w-[90vw] p-0">
+			<DialogContent className="sm:max-w-[90vw] p-0">
 				<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
 					<div className="flex flex-col space-y-6">
 						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
@@ -425,60 +427,62 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 															project.
 														</AlertDialogDescription>
 
-														<div>
-															<TooltipProvider delayDuration={0}>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
-																			Select a Server{" "}
-																			{!isCloud ? "(Optional)" : ""}
-																			<HelpCircle className="size-4 text-muted-foreground" />
-																		</Label>
-																	</TooltipTrigger>
-																	<TooltipContent
-																		className="z-[999] w-[300px]"
-																		align="start"
-																		side="top"
-																	>
-																		<span>
-																			If no server is selected, the application
-																			will be deployed on the server where the
-																			user is logged in.
-																		</span>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
+														{hasServers && (
+															<div>
+																<TooltipProvider delayDuration={0}>
+																	<Tooltip>
+																		<TooltipTrigger asChild>
+																			<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
+																				Select a Server{" "}
+																				{!isCloud ? "(Optional)" : ""}
+																				<HelpCircle className="size-4 text-muted-foreground" />
+																			</Label>
+																		</TooltipTrigger>
+																		<TooltipContent
+																			className="z-[999] w-[300px]"
+																			align="start"
+																			side="top"
+																		>
+																			<span>
+																				If no server is selected, the
+																				application will be deployed on the
+																				server where the user is logged in.
+																			</span>
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
 
-															<Select
-																onValueChange={(e) => {
-																	setServerId(e);
-																}}
-															>
-																<SelectTrigger>
-																	<SelectValue placeholder="Select a Server" />
-																</SelectTrigger>
-																<SelectContent>
-																	<SelectGroup>
-																		{servers?.map((server) => (
-																			<SelectItem
-																				key={server.serverId}
-																				value={server.serverId}
-																			>
-																				<span className="flex items-center gap-2 justify-between w-full">
-																					<span>{server.name}</span>
-																					<span className="text-muted-foreground text-xs self-center">
-																						{server.ipAddress}
+																<Select
+																	onValueChange={(e) => {
+																		setServerId(e);
+																	}}
+																>
+																	<SelectTrigger>
+																		<SelectValue placeholder="Select a Server" />
+																	</SelectTrigger>
+																	<SelectContent>
+																		<SelectGroup>
+																			{servers?.map((server) => (
+																				<SelectItem
+																					key={server.serverId}
+																					value={server.serverId}
+																				>
+																					<span className="flex items-center gap-2 justify-between w-full">
+																						<span>{server.name}</span>
+																						<span className="text-muted-foreground text-xs self-center">
+																							{server.ipAddress}
+																						</span>
 																					</span>
-																				</span>
-																			</SelectItem>
-																		))}
-																		<SelectLabel>
-																			Servers ({servers?.length})
-																		</SelectLabel>
-																	</SelectGroup>
-																</SelectContent>
-															</Select>
-														</div>
+																				</SelectItem>
+																			))}
+																			<SelectLabel>
+																				Servers ({servers?.length})
+																			</SelectLabel>
+																		</SelectGroup>
+																	</SelectContent>
+																</Select>
+															</div>
+														)}
 													</AlertDialogHeader>
 													<AlertDialogFooter>
 														<AlertDialogCancel>Cancel</AlertDialogCancel>

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

@@ -25,6 +25,7 @@ const examples = [
 export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 	// Get servers from the API
 	const { data: servers } = api.server.withSSHKey.useQuery();
+	const hasServers = servers && servers.length > 0;
 
 	const handleExampleClick = (example: string) => {
 		setTemplateInfo({ ...templateInfo, userInput: example });
@@ -47,37 +48,39 @@ export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 						/>
 					</div>
 
-					<div className="space-y-2">
-						<Label htmlFor="server-deploy">
-							Select the server where you want to deploy (optional)
-						</Label>
-						<Select
-							value={templateInfo.server?.serverId}
-							onValueChange={(value) => {
-								const server = servers?.find((s) => s.serverId === value);
-								if (server) {
-									setTemplateInfo({
-										...templateInfo,
-										server: server,
-									});
-								}
-							}}
-						>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select a server" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									{servers?.map((server) => (
-										<SelectItem key={server.serverId} value={server.serverId}>
-											{server.name}
-										</SelectItem>
-									))}
-									<SelectLabel>Servers ({servers?.length})</SelectLabel>
-								</SelectGroup>
-							</SelectContent>
-						</Select>
-					</div>
+					{hasServers && (
+						<div className="space-y-2">
+							<Label htmlFor="server-deploy">
+								Select the server where you want to deploy (optional)
+							</Label>
+							<Select
+								value={templateInfo.server?.serverId}
+								onValueChange={(value) => {
+									const server = servers?.find((s) => s.serverId === value);
+									if (server) {
+										setTemplateInfo({
+											...templateInfo,
+											server: server,
+										});
+									}
+								}}
+							>
+								<SelectTrigger className="w-full">
+									<SelectValue placeholder="Select a server" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectGroup>
+										{servers?.map((server) => (
+											<SelectItem key={server.serverId} value={server.serverId}>
+												{server.name}
+											</SelectItem>
+										))}
+										<SelectLabel>Servers ({servers?.length})</SelectLabel>
+									</SelectGroup>
+								</SelectContent>
+							</Select>
+						</div>
+					)}
 
 					<div className="space-y-2">
 						<Label>Examples:</Label>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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