Restore grid layout on desktop, stack on mobile

This commit is contained in:
chris 2025-12-10 12:47:05 -05:00
parent f0ad94aa37
commit 75476b62a3

View File

@ -232,6 +232,7 @@ h1 {
.save-item input { width: 18px; height: 18px; } .save-item input { width: 18px; height: 18px; }
.save-actions { display: flex; justify-content: flex-end; gap: 8px; } .save-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-woodland { width: 22px; height: 22px; } .icon-woodland { width: 22px; height: 22px; }
.import-selection { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.container { .container {
max-width: 1200px; max-width: 1200px;
@ -247,11 +248,12 @@ h1 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px; gap: 20px;
align-items: start; /* Prevent shorter cards from stretching to tallest row mate */ align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
grid-auto-flow: row dense; /* Fill gaps when possible */
} }
@media (min-width: 1280px) { @media (max-width: 768px) {
.projects-grid { .projects-grid {
grid-template-columns: repeat(3, minmax(320px, 1fr)); grid-template-columns: 1fr;
} }
} }
@ -264,7 +266,6 @@ h1 {
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: background-color 0.3s; transition: background-color 0.3s;
border: 1px solid var(--border); border: 1px solid var(--border);
z-index: 10;
} }
.project-header { .project-header {