Merge pull request #1029 from wish-oss/refactor/port-mapping-ui

refactor: enhance ManageTraefikPorts with ScrollArea for better UI

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -18,6 +18,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
 	Select,
 	SelectContent,
@@ -114,7 +115,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 						</DialogTitle>
 						<DialogDescription className="text-base w-full">
 							<div className="flex items-center justify-between">
-								{t("settings.server.webServer.traefik.managePortsDescription")}
+								<div className="flex flex-col gap-1">
+									{t(
+										"settings.server.webServer.traefik.managePortsDescription",
+									)}
+									<span className="text-sm text-muted-foreground">
+										{fields.length} port mapping{fields.length !== 1 ? "s" : ""}{" "}
+										configured
+									</span>
+								</div>
 								<Button
 									onClick={handleAddPort}
 									variant="default"
@@ -141,6 +150,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 										</p>
 									</div>
 								) : (
+									<ScrollArea className="h-[400px] pr-4">
 										<div className="grid gap-4">
 											{fields.map((field, index) => (
 												<Card key={field.id}>
@@ -244,6 +254,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 												</Card>
 											))}
 										</div>
+									</ScrollArea>
 								)}
 
 								{fields.length > 0 && (
@@ -281,7 +292,6 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 									</AlertBlock>
 								)}
 							</div>
-
 							<DialogFooter>
 								<Button
 									type="submit"