fix: align project cards left on wide screens#4590
Closed
ravindu0823 wants to merge 2 commits into
Closed
Conversation
Fixes Dokploy#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>
dosubot
Bot
added
the
size:XS
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>
Contributor
|
Duplicate #4524 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
On large/wide screens (e.g. 1920px+, ultrawide), project cards on the Projects page (
/dashboard/projects) spread far apart horizontally with large empty gaps instead of packing to the left.Root cause
apps/dokploy/components/dashboard/projects/show.tsxused fixed column counts (grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5) on aw-fullcontainer, plus a per-cardlg:max-w-mdcap (and a deadflex-wrapleft over from a previous flex layout). On very wide screens each fixed grid track becomes much wider than the capped card, leaving big gaps between cards.Fix
Two className-only edits:
grid-cols-*and deadflex-wrapwith an auto-fill track —grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] gap-5(keepingw-fullandgap-5).lg:max-w-md(keepingw-full).This packs cards to the left at a stable width and grows the column count naturally with screen width.
Test
This is a pure Tailwind className change with no extractable logic, and the repo has no jsdom / React Testing Library (React components cannot be rendered in tests), so there is genuinely no unit test to add. Verified
pnpm --filter=dokploy run typecheckpasses clean:(no errors)
Fixes #4523
🤖 Generated with Claude Code