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

fix: cannot hover over project cards

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