From 612934bf342a87ffdbbb47ab080cefe07fcff441 Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Mon, 11 May 2026 15:39:09 -0600
Subject: [PATCH] fix: cannot hover over project card tooltip items (#6071)

fix: cannot hover over project cards
---
 packages/assets/styles/classes.scss           |  2 ++
 .../ui/src/components/base/SmartClickable.vue |  4 ++-
 .../components/project/card/ProjectCard.vue   | 12 +++++++--
 .../src/stories/base/ProjectCard.stories.ts   | 25 +++++++++++++++++++
 .../stories/base/SmartClickable.stories.ts    |  7 ++++++
 5 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index 5d41c6fbc..1822c5fda 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -711,6 +711,8 @@ a:not(.no-click-animation),
 }
 
 .v-popper--theme-tooltip {
+	pointer-events: none;
+
 	.v-popper__inner {
 		background: var(--color-tooltip-bg) !important;
 		color: var(--color-tooltip-text) !important;
diff --git a/packages/ui/src/components/base/SmartClickable.vue b/packages/ui/src/components/base/SmartClickable.vue
index 216c2f25d..961de1732 100644
--- a/packages/ui/src/components/base/SmartClickable.vue
+++ b/packages/ui/src/components/base/SmartClickable.vue
@@ -48,7 +48,9 @@ defineOptions({
 
 	// When clickable is being hovered or focus-visible, give contents an effect
 	:first-child:hover + .smart-clickable__contents,
-	:first-child:focus-visible + .smart-clickable__contents {
+	:first-child:focus-visible + .smart-clickable__contents,
+	.smart-clickable__contents:hover,
+	.smart-clickable__contents:focus-within {
 		// Utility classes for contents
 		:deep(.smart-clickable\:underline-on-hover) {
 			text-decoration: underline;
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index 35663c407..a1f62ef15 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -62,7 +62,11 @@
 								:hide-label="true"
 							/>
 							<ServerPing v-if="serverPing && serverStatusOnline" :ping="serverPing" />
-							<ServerRegion v-if="serverRegion" :region="serverRegion" />
+							<ServerRegion
+								v-if="serverRegion"
+								:region="serverRegion"
+								class="smart-clickable:allow-pointer-events"
+							/>
 						</template>
 						<ProjectCardEnvironment
 							v-if="environment"
@@ -158,7 +162,11 @@
 					<div class="flex items-center gap-1">
 						<template v-if="isServerProject">
 							<ServerPing v-if="serverPing && serverStatusOnline" :ping="serverPing" />
-							<ServerRegion v-if="serverRegion" :region="serverRegion" />
+							<ServerRegion
+								v-if="serverRegion"
+								:region="serverRegion"
+								class="smart-clickable:allow-pointer-events"
+							/>
 						</template>
 						<ProjectCardEnvironment
 							v-if="environment"
diff --git a/packages/ui/src/stories/base/ProjectCard.stories.ts b/packages/ui/src/stories/base/ProjectCard.stories.ts
index 94bc2ed37..a2a4f4b88 100644
--- a/packages/ui/src/stories/base/ProjectCard.stories.ts
+++ b/packages/ui/src/stories/base/ProjectCard.stories.ts
@@ -126,6 +126,31 @@ export const WithStatus: Story = {
 	}),
 }
 
+export const ServerProject: Story = {
+	args: {
+		link: '/server/example-server',
+		layout: 'grid',
+		title: 'Example Server',
+		author: { name: 'ServerAdmin', link: '/user/ServerAdmin' },
+		summary: 'A live multiplayer server with required content and regional metadata.',
+		iconUrl: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
+		isServerProject: true,
+		serverOnlinePlayers: 128,
+		serverStatusOnline: true,
+		serverRecentPlays: 8420,
+		serverPing: 42,
+		serverRegion: 'us',
+		serverModpackContent: {
+			name: 'Example Modpack',
+			icon: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
+			showCustomModpackTooltip: true,
+		},
+		tags: ['adventure', 'multiplayer', 'quests'],
+		allTags: ['adventure', 'multiplayer', 'quests', 'economy', 'roleplay', 'survival'],
+		dateUpdated: '2024-01-15T00:00:00Z',
+	},
+}
+
 export const DisplayModes: StoryObj = {
 	decorators: [], // Remove default decorator for this story
 	render: () => ({
diff --git a/packages/ui/src/stories/base/SmartClickable.stories.ts b/packages/ui/src/stories/base/SmartClickable.stories.ts
index b497ce925..ceff865d3 100644
--- a/packages/ui/src/stories/base/SmartClickable.stories.ts
+++ b/packages/ui/src/stories/base/SmartClickable.stories.ts
@@ -18,6 +18,13 @@ const meta = {
 				<div style="padding: 1rem; background: var(--color-button-bg); border-radius: 0.5rem;">
 					<h3>Clickable Card</h3>
 					<p>The entire card is clickable</p>
+					<span
+						v-tooltip="'Tooltip child keeps the card hover state'"
+						class="smart-clickable:allow-pointer-events"
+						style="display: inline-flex; margin-top: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--color-raised-bg);"
+					>
+						Hover tooltip
+					</span>
 				</div>
 			</SmartClickable>
 		`,