From 8f5273600af1a883b4b95eac7e5cb5880345a908 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 11 Sep 2024 18:20:57 +0200
Subject: [PATCH] fix(projects): do not hide 6th project on project overview

(cherry picked from commit b52d6dbf59f48a86cbcfad2a24c7fce9e3575639)
---
 .../project/partials/ProjectCardGrid.vue        | 17 +++++++++++++----
 frontend/src/views/Home.vue                     |  1 +
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/project/partials/ProjectCardGrid.vue b/frontend/src/components/project/partials/ProjectCardGrid.vue
index 58d507bd1..e5e4a602a 100644
--- a/frontend/src/components/project/partials/ProjectCardGrid.vue
+++ b/frontend/src/components/project/partials/ProjectCardGrid.vue
@@ -1,5 +1,8 @@
 <template>
-	<ul class="project-grid">
+	<ul
+		class="project-grid"
+		:class="{ 'show-even-number-of-projects': showEvenNumberOfProjects }"
+	>
 		<li
 			v-for="(item, index) in filteredProjects"
 			:key="`project_${item.id}_${index}`"
@@ -19,11 +22,13 @@ import ProjectCard from './ProjectCard.vue'
 const props = withDefaults(defineProps<{
 	projects: IProject[],
 	showArchived?: boolean,
-	itemLimit?: boolean
+	itemLimit?: boolean,
+	showEvenNumberOfProjects?: boolean,
 }>(), {
 	projects: () => [],
 	showArchived: false,
 	itemLimit: false,
+	showEvenNumberOfProjects: false,
 })
 
 const filteredProjects = computed(() => {
@@ -58,9 +63,13 @@ const filteredProjects = computed(() => {
 
 	@media screen and (min-width: $widescreen) {
 		--project-grid-columns: 5;
+	}
 
-		.project-grid-item:nth-child(6) {
-			display: none;
+	&.show-even-number-of-projects {
+		@media screen and (min-width: $widescreen) {
+			.project-grid-item:nth-child(5) {
+				display: none;
+			}
 		}
 	}
 }
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index db2e5a582..cf229ca2c 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -42,6 +42,7 @@
 			<ProjectCardGrid
 				v-cy="'projectCardGrid'"
 				:projects="projectHistory"
+				:show-even-number-of-projects="true"
 			/>
 		</div>
 		<ShowTasks