proj card fixes

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,

apps/frontend/src/pages/organization/[id].vue

@@ -186,8 +186,7 @@
 				<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">
+				<ProjectCardList v-if="projects && projects.length > 0">
 					<ProjectCard
 						v-for="project in (route.params.projectType !== undefined
 							? (projects ?? []).filter((x) =>
@@ -227,9 +226,7 @@
 						:color="project.color"
 						layout="list"
 					/>
-					</div>
-				</template>
-
+				</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'

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,

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>

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>

packages/ui/src/components/project/card/ProjectCard.vue

@@ -1,10 +1,10 @@
 <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"
+				@mouseenter="$emit('hover')"
 			></AutoLink>
 		</template>
 		<div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']">
@@ -67,11 +67,7 @@
 						<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"
-							/>
+						<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
 					</div>
 				</div>
 			</div>
@@ -135,7 +131,6 @@
 			</div>
 		</div>
 	</SmartClickable>
-	</div>
 </template>
 
 <script setup lang="ts">

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',