From e685b804c1ad40800dcf3572ddcaa58e824f6af7 Mon Sep 17 00:00:00 2001
From: ravindu0823 <guestpc87@gmail.com>
Date: Tue, 9 Jun 2026 14:36:38 +0530
Subject: [PATCH 1/2] fix: align project cards left on wide screens

Fixes #4523

Root cause: the projects grid used fixed column counts
(grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4
3xl:grid-cols-5) on a w-full container plus a per-card lg:max-w-md
cap. On very wide screens each fixed track is far wider than the
capped card, leaving large gaps between cards.

Fix: use an auto-fill grid track
(grid-cols-[repeat(auto-fill,minmax(20rem,1fr))]) and drop the
per-card lg:max-w-md cap so cards pack to the left at a stable
width while the column count grows with the viewport.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dokploy/components/dashboard/projects/show.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index 2a518e5525..480add42fd 100644
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -290,7 +290,7 @@ export const ShowProjects = () => {
 											</span>
 										</div>
 									)}
-									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
+									<div className="w-full grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] gap-5">
 										{filteredProjects?.map((project) => {
 											const emptyServices = project?.environments
 												.map(
@@ -330,7 +330,7 @@ export const ShowProjects = () => {
 											return (
 												<div
 													key={project.projectId}
-													className="w-full lg:max-w-md"
+													className="w-full"
 												>
 													<Link
 														href={

From 4a8e71bc06d7330044f9c9e4059e29723cb3acd0 Mon Sep 17 00:00:00 2001
From: ravindu0823 <guestpc87@gmail.com>
Date: Tue, 9 Jun 2026 14:56:18 +0530
Subject: [PATCH 2/2] fix: prevent project grid track from overflowing narrow
 viewports

Address review: a rigid minmax(20rem,1fr) track cannot shrink below 20rem, so
on ~320-375px phone viewports the single column overflowed its container (the
old grid-cols-1 never did). Clamp the minimum with min(20rem,100%) so the
column collapses to the container width on small screens while keeping the
auto-fill packing on wide screens.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dokploy/components/dashboard/projects/show.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index 480add42fd..83c1bfc18d 100644
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -290,7 +290,7 @@ export const ShowProjects = () => {
 											</span>
 										</div>
 									)}
-									<div className="w-full grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] gap-5">
+									<div className="w-full grid grid-cols-[repeat(auto-fill,minmax(min(20rem,100%),1fr))] gap-5">
 										{filteredProjects?.map((project) => {
 											const emptyServices = project?.environments
 												.map(