fix: cannot hover over project card tooltip items (#6071)

fix: cannot hover over project cards

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;

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;

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"

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: () => ({

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