From 4c90f4754f61079bc074bde88eda56c34ccf6cdb Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 15 Mar 2025 22:48:25 -0600
Subject: [PATCH] refactor(monitoring-card): change node display from row to
 grid layout for improved responsiveness

---
 .../components/dashboard/swarm/monitoring-card.tsx     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index 0c38b509..090288a0 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -176,10 +176,12 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 					</Card>
 				</div>
 
-				<div className="flex flex-row gap-4">
-					{nodes.map((node) => (
-						<NodeCard key={node.ID} node={node} serverId={serverId} />
-					))}
+				<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+					{[...nodes, ...nodes, ...nodes, ...nodes, ...nodes, ...nodes].map(
+						(node) => (
+							<NodeCard key={node.ID} node={node} serverId={serverId} />
+						),
+					)}
 				</div>
 			</div>
 		</Card>