From 5b3a2b5cd8f44b54e8d244e4007cb74e0425a734 Mon Sep 17 00:00:00 2001
From: Adams Okode <adamsokode@gmail.com>
Date: Sun, 31 May 2026 21:35:11 +0300
Subject: [PATCH] fix(projects): align project cards to the left on large
 screens

- Switch from fractional grid-cols to repeat(auto-fill, minmax(280px, 280px))
- Cards now pack left with consistent gaps on all screen sizes
- Prevents large empty space between cards on wide screens
- Maintains responsive behavior (full width on mobile, increasing columns on bigger screens)
---
 apps/dokploy/components/dashboard/projects/show.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index 2a518e5525..20fbc132f3 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-1 gap-5 sm:grid-cols-[repeat(auto-fill,minmax(280px,280px))]">
 										{filteredProjects?.map((project) => {
 											const emptyServices = project?.environments
 												.map(
@@ -328,10 +328,7 @@ export const ShowProjects = () => {
 											const hasNoEnvironments = !accessibleEnvironment;
 
 											return (
-												<div
-													key={project.projectId}
-													className="w-full lg:max-w-md"
-												>
+												<div key={project.projectId} className="w-full">
 													<Link
 														href={
 															hasNoEnvironments