From 428efde36db168dfb64eba1fddcbbcf207122d58 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sat, 7 Feb 2026 12:05:59 -0800
Subject: [PATCH] proj card fixes

---
 apps/frontend/src/pages/collection/[id].vue   |   7 +-
 apps/frontend/src/pages/organization/[id].vue |  86 ++++---
 apps/frontend/src/pages/user/[id].vue         |   8 +-
 .../ui/src/components/base/SmartClickable.vue |   8 +-
 .../components/project/ProjectCardList.vue    |   2 +-
 .../components/project/card/ProjectCard.vue   | 227 +++++++++---------
 packages/utils/changelog.ts                   |   8 +
 7 files changed, 178 insertions(+), 168 deletions(-)

diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 37233036a..9b6766097 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -285,9 +285,9 @@
 			]"
 		/>
 
-		<div
+		<ProjectCardList
 			v-if="projects && projects?.length > 0"
-			:class="'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')"
+			:layout="cosmetics.searchDisplayMode.collection"
 		>
 			<ProjectCard
 				v-for="project in (route.params.projectType !== undefined
@@ -343,7 +343,7 @@
 					</button>
 				</template>
 			</ProjectCard>
-		</div>
+		</ProjectCardList>
 		<div v-else>
 			<div class="mx-auto flex flex-col justify-center gap-8 p-6 text-center">
 				<EmptyIllustration class="h-[120px] w-auto" />
@@ -402,6 +402,7 @@ import {
 	NormalPage,
 	OverflowMenu,
 	ProjectCard,
+	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
 	useRelativeTime,
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index c24ceccfa..9539d3bff 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -186,50 +186,47 @@
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
 					<NavTabs :links="navLinks" />
 				</div>
-				<template v-if="projects && projects.length > 0">
-					<div class="project-list display-mode--list">
-						<ProjectCard
-							v-for="project in (route.params.projectType !== undefined
-								? (projects ?? []).filter((x) =>
-										x.project_types.includes(
-											typeof route.params.projectType === 'string'
-												? route.params.projectType.slice(0, route.params.projectType.length - 1)
-												: route.params.projectType[0]?.slice(
-														0,
-														route.params.projectType[0].length - 1,
-													) || '',
-										),
-									)
-								: (projects ?? [])
-							)
-								.slice()
-								.sort((a, b) => b.downloads - a.downloads)"
-							:key="project.id"
-							:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
-							:title="project.name"
-							:icon-url="project.icon_url"
-							:banner="project.gallery.find((element) => element.featured)?.url"
-							:summary="project.summary"
-							:date-updated="project.updated"
-							:downloads="project.downloads"
-							:followers="project.followers"
-							:tags="project.categories"
-							:environment="{
-								clientSide: project.client_side,
-								serverSide: project.server_side,
-							}"
-							:status="
-								auth.user &&
-								(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
-									? (project.status as ProjectStatus)
-									: undefined
-							"
-							:color="project.color"
-							layout="list"
-						/>
-					</div>
-				</template>
-
+				<ProjectCardList v-if="projects && projects.length > 0">
+					<ProjectCard
+						v-for="project in (route.params.projectType !== undefined
+							? (projects ?? []).filter((x) =>
+									x.project_types.includes(
+										typeof route.params.projectType === 'string'
+											? route.params.projectType.slice(0, route.params.projectType.length - 1)
+											: route.params.projectType[0]?.slice(
+													0,
+													route.params.projectType[0].length - 1,
+												) || '',
+									),
+								)
+							: (projects ?? [])
+						)
+							.slice()
+							.sort((a, b) => b.downloads - a.downloads)"
+						:key="project.id"
+						:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
+						:title="project.name"
+						:icon-url="project.icon_url"
+						:banner="project.gallery.find((element) => element.featured)?.url"
+						:summary="project.summary"
+						:date-updated="project.updated"
+						:downloads="project.downloads"
+						:followers="project.followers"
+						:tags="project.categories"
+						:environment="{
+							clientSide: project.client_side,
+							serverSide: project.server_side,
+						}"
+						:status="
+							auth.user &&
+							(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
+								? (project.status as ProjectStatus)
+								: undefined
+						"
+						:color="project.color"
+						layout="list"
+					/>
+				</ProjectCardList>
 				<div v-else-if="true" class="error">
 					<UpToDate class="icon" />
 					<br />
@@ -267,6 +264,7 @@ import {
 	ContentPageHeader,
 	OverflowMenu,
 	ProjectCard,
+	ProjectCardList,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 245d017c6..4d98e7c1f 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -286,9 +286,9 @@
 					<NavTabs :links="navLinks" />
 				</div>
 				<div v-if="projects.length > 0">
-					<div
+					<ProjectCardList
 						v-if="route.params.projectType !== 'collections'"
-						:class="'project-list display-mode--' + cosmetics.searchDisplayMode.user"
+						:layout="cosmetics.searchDisplayMode.user"
 					>
 						<ProjectCard
 							v-for="project in (route.params.projectType !== undefined
@@ -315,6 +315,7 @@
 								...project.additional_categories,
 							]"
 							:followers="project.followers"
+							:banner="project.gallery.find((element) => element.featured)?.url"
 							:color="project.color ?? undefined"
 							:environment="{
 								clientSide: project.client_side,
@@ -328,7 +329,7 @@
 							"
 							:status="project.status"
 						/>
-					</div>
+					</ProjectCardList>
 				</div>
 				<div
 					v-else-if="
@@ -499,6 +500,7 @@ import {
 	NewModal,
 	OverflowMenu,
 	ProjectCard,
+	ProjectCardList,
 	TagItem,
 	useRelativeTime,
 	useVIntl,
diff --git a/packages/ui/src/components/base/SmartClickable.vue b/packages/ui/src/components/base/SmartClickable.vue
index 5ed15d8de..c3e4e8748 100644
--- a/packages/ui/src/components/base/SmartClickable.vue
+++ b/packages/ui/src/components/base/SmartClickable.vue
@@ -1,7 +1,13 @@
 <template>
 	<div class="smart-clickable" :class="{ 'smart-clickable--has-clickable': !!$slots.clickable }">
 		<slot name="clickable" />
-		<div v-bind="$attrs" class="smart-clickable__contents pointer-events-none">
+		<div
+			v-bind="$attrs"
+			class="smart-clickable__contents"
+			:class="{
+				'pointer-events-none': !!$slots.clickable,
+			}"
+		>
 			<slot />
 		</div>
 	</div>
diff --git a/packages/ui/src/components/project/ProjectCardList.vue b/packages/ui/src/components/project/ProjectCardList.vue
index 934162e3f..922a39b83 100644
--- a/packages/ui/src/components/project/ProjectCardList.vue
+++ b/packages/ui/src/components/project/ProjectCardList.vue
@@ -23,6 +23,6 @@ withDefaults(
 <style scoped lang="scss">
 .grid-project-list {
 	display: grid;
-	grid-template-columns: repeat(2, minmax(150px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 }
 </style>
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index a93a36a4d..19259122e 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -1,123 +1,52 @@
 <template>
-	<div class="w-full" @mouseenter="$emit('hover')">
-		<SmartClickable class="w-full project-card-container">
-			<template v-if="link" #clickable>
-				<AutoLink
-					:to="link"
-					class="rounded-xl no-outline no-click-animation custom-focus-indicator"
-				></AutoLink>
-			</template>
-			<div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']">
-				<div
-					:style="{ '--_project-color': cssColor }"
-					class="relative bg-project-gradient overflow-clip aspect-[2/1] w-full border-0 border-b-[1px] border-solid border-surface-4"
-				>
-					<img
-						v-if="banner"
-						:src="banner"
-						alt=""
-						class="absolute w-full h-full inset-0 object-cover object-center"
-					/>
-					<img
-						v-else
-						src="https://cdn-raw.modrinth.com/landing-new/landing.webp"
-						alt=""
-						class="absolute w-full h-full inset-0 object-cover object-center placeholder-banner scale-[200%]"
-					/>
-				</div>
-				<div class="p-4 flex flex-col gap-3 grow">
-					<div class="flex gap-3">
-						<Avatar :src="iconUrl" size="96px" class="project-card__icon" no-shadow />
-						<div class="flex flex-col gap-2 w-full">
-							<div class="grid grid-cols-[1fr_auto] gap-4">
-								<div class="flex flex-col gap-1">
-									<div class="flex gap-2 items-center">
-										<ProjectCardTitle :title="title" compact />
-										<ProjectCardAuthor v-if="author" :author="author" />
-									</div>
-									<div class="m-0 font-normal line-clamp-2">
-										{{ summary }}
-									</div>
+	<SmartClickable class="w-full project-card-container">
+		<template v-if="link" #clickable>
+			<AutoLink
+				:to="link"
+				class="rounded-xl no-outline no-click-animation custom-focus-indicator"
+				@mouseenter="$emit('hover')"
+			></AutoLink>
+		</template>
+		<div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']">
+			<div
+				:style="{ '--_project-color': cssColor }"
+				class="relative bg-project-gradient overflow-clip aspect-[2/1] w-full border-0 border-b-[1px] border-solid border-surface-4"
+			>
+				<img
+					v-if="banner"
+					:src="banner"
+					alt=""
+					class="absolute w-full h-full inset-0 object-cover object-center"
+				/>
+				<img
+					v-else
+					src="https://cdn-raw.modrinth.com/landing-new/landing.webp"
+					alt=""
+					class="absolute w-full h-full inset-0 object-cover object-center placeholder-banner scale-[200%]"
+				/>
+			</div>
+			<div class="p-4 flex flex-col gap-3 grow">
+				<div class="flex gap-3">
+					<Avatar :src="iconUrl" size="96px" class="project-card__icon" no-shadow />
+					<div class="flex flex-col gap-2 w-full">
+						<div class="grid grid-cols-[1fr_auto] gap-4">
+							<div class="flex flex-col gap-1">
+								<div class="flex gap-2 items-center">
+									<ProjectCardTitle :title="title" compact />
+									<ProjectCardAuthor v-if="author" :author="author" />
+								</div>
+								<div class="m-0 font-normal line-clamp-2">
+									{{ summary }}
 								</div>
 							</div>
 						</div>
 					</div>
-					<div class="flex gap-2 shrink-0 empty:hidden smart-clickable:allow-pointer-events">
-						<slot name="actions" />
-					</div>
-					<div class="mt-auto flex flex-col gap-3 flex-wrap overflow-hidden justify-between grow">
-						<div class="flex items-center gap-1 flex-wrap overflow-hidden">
-							<ProjectCardEnvironment
-								v-if="environment"
-								:client-side="environment.clientSide"
-								:server-side="environment.serverSide"
-							/>
-							<ProjectCardTags
-								v-if="tags"
-								:tags="tags"
-								:exclude-loaders="excludeLoaders"
-								:deprioritized-tags="deprioritizedTags"
-								:max-tags="6 + (!!environment ? 0 : 1)"
-							/>
-						</div>
-						<div
-							v-if="downloads !== undefined || followers !== undefined"
-							class="flex items-center gap-3 justify-between flex-wrap"
-						>
-							<div class="flex items-center gap-3 no-wrap flex-wrap">
-								<ProjectCardStats :downloads="downloads" :followers="followers" />
-							</div>
-							<ProjectCardDate
-								v-if="date && autoDisplayDate"
-								:type="autoDisplayDate"
-								:date="date"
-							/>
-						</div>
-					</div>
 				</div>
-			</div>
-			<div
-				v-else
-				:class="[
-					baseCardStyle,
-					'p-4 grid grid-project-card-list gap-x-3 gap-y-2',
-					{ 'has-actions': !!$slots.actions },
-				]"
-			>
-				<Avatar
-					:src="iconUrl"
-					size="100px"
-					class="project-card__icon grid-project-card-list__icon"
-					no-shadow
-				/>
-				<div class="flex flex-col gap-2 grid-project-card-list__info">
-					<div class="flex gap-2 items-center">
-						<ProjectCardTitle :title="title" />
-						<ProjectCardAuthor v-if="author" :author="author" />
-						<ProjectStatusBadge v-if="status" :status="status" />
-					</div>
-					<div class="project-card-summary m-0 font-normal line-clamp-2">
-						{{ summary }}
-					</div>
-				</div>
-
-				<div
-					v-if="!!$slots.actions"
-					class="flex gap-1 shrink-0 ml-auto empty:hidden smart-clickable:allow-pointer-events grid-project-card-list__actions"
-				>
+				<div class="flex gap-2 shrink-0 empty:hidden smart-clickable:allow-pointer-events">
 					<slot name="actions" />
 				</div>
-				<div
-					class="flex flex-col gap-3 items-end shrink-0 ml-auto empty:hidden grid-project-card-list__stats"
-					:class="{ 'mt-3': !!$slots.actions }"
-				>
-					<div class="flex items-center gap-3">
-						<ProjectCardStats :downloads="downloads" :followers="followers" />
-					</div>
-					<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
-				</div>
-				<div class="mt-auto flex items-center gap-3 grid-project-card-list__tags">
-					<div class="flex items-center gap-1 flex-wrap">
+				<div class="mt-auto flex flex-col gap-3 flex-wrap overflow-hidden justify-between grow">
+					<div class="flex items-center gap-1 flex-wrap overflow-hidden">
 						<ProjectCardEnvironment
 							v-if="environment"
 							:client-side="environment.clientSide"
@@ -126,16 +55,82 @@
 						<ProjectCardTags
 							v-if="tags"
 							:tags="tags"
-							:extra-tags="extraTags"
 							:exclude-loaders="excludeLoaders"
 							:deprioritized-tags="deprioritizedTags"
-							:max-tags="(!!$slots.actions ? 4 : 5) + (!!environment ? 0 : 1)"
+							:max-tags="6 + (!!environment ? 0 : 1)"
 						/>
 					</div>
+					<div
+						v-if="downloads !== undefined || followers !== undefined"
+						class="flex items-center gap-3 justify-between flex-wrap"
+					>
+						<div class="flex items-center gap-3 no-wrap flex-wrap">
+							<ProjectCardStats :downloads="downloads" :followers="followers" />
+						</div>
+						<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
+					</div>
 				</div>
 			</div>
-		</SmartClickable>
-	</div>
+		</div>
+		<div
+			v-else
+			:class="[
+				baseCardStyle,
+				'p-4 grid grid-project-card-list gap-x-3 gap-y-2',
+				{ 'has-actions': !!$slots.actions },
+			]"
+		>
+			<Avatar
+				:src="iconUrl"
+				size="100px"
+				class="project-card__icon grid-project-card-list__icon"
+				no-shadow
+			/>
+			<div class="flex flex-col gap-2 grid-project-card-list__info">
+				<div class="flex gap-2 items-center">
+					<ProjectCardTitle :title="title" />
+					<ProjectCardAuthor v-if="author" :author="author" />
+					<ProjectStatusBadge v-if="status" :status="status" />
+				</div>
+				<div class="project-card-summary m-0 font-normal line-clamp-2">
+					{{ summary }}
+				</div>
+			</div>
+
+			<div
+				v-if="!!$slots.actions"
+				class="flex gap-1 shrink-0 ml-auto empty:hidden smart-clickable:allow-pointer-events grid-project-card-list__actions"
+			>
+				<slot name="actions" />
+			</div>
+			<div
+				class="flex flex-col gap-3 items-end shrink-0 ml-auto empty:hidden grid-project-card-list__stats"
+				:class="{ 'mt-3': !!$slots.actions }"
+			>
+				<div class="flex items-center gap-3">
+					<ProjectCardStats :downloads="downloads" :followers="followers" />
+				</div>
+				<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
+			</div>
+			<div class="mt-auto flex items-center gap-3 grid-project-card-list__tags">
+				<div class="flex items-center gap-1 flex-wrap">
+					<ProjectCardEnvironment
+						v-if="environment"
+						:client-side="environment.clientSide"
+						:server-side="environment.serverSide"
+					/>
+					<ProjectCardTags
+						v-if="tags"
+						:tags="tags"
+						:extra-tags="extraTags"
+						:exclude-loaders="excludeLoaders"
+						:deprioritized-tags="deprioritizedTags"
+						:max-tags="(!!$slots.actions ? 4 : 5) + (!!environment ? 0 : 1)"
+					/>
+				</div>
+			</div>
+		</div>
+	</SmartClickable>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/utils/changelog.ts b/packages/utils/changelog.ts
index 0869a26b4..e075ad8e3 100644
--- a/packages/utils/changelog.ts
+++ b/packages/utils/changelog.ts
@@ -20,6 +20,14 @@ const VERSIONS: VersionEntry[] = [
 	// - Adjusted pop-up design to include a border.
 	// - Updated translations.`,
 	// 	},
+	{
+		date: `2026-02-07T12:10:00-08:00`,
+		product: 'web',
+		body: `## Improvements
+- Fixed grid project lists displaying too narrow sometimes.
+- Fixed grid project list on user profiles not displaying project banners.
+- Fixed grid project list cards not matching the height of their neighbor.`,
+	},
 	{
 		date: `2026-02-07T11:45:00-08:00`,
 		product: 'web',