From 124b8f408124717134fb764cfd5060e05a4c4f1e Mon Sep 17 00:00:00 2001
From: Nico <47644445+nicotsx@users.noreply.github.com>
Date: Mon, 9 Feb 2026 18:15:34 +0100
Subject: [PATCH] fix: make retention badge clickable for mobile devices (#486)

---
 app/client/components/retention-category-badges.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/client/components/retention-category-badges.tsx b/app/client/components/retention-category-badges.tsx
index 93869cb0..97a16f15 100644
--- a/app/client/components/retention-category-badges.tsx
+++ b/app/client/components/retention-category-badges.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { cn } from "~/client/lib/utils";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 
@@ -38,6 +39,8 @@ function Badge({ category }: { category: string }) {
 }
 
 export function RetentionCategoryBadges({ categories, className }: RetentionCategoryBadgesProps) {
+	const [open, setOpen] = useState(false);
+
 	if (categories.length === 0) {
 		return null;
 	}
@@ -63,12 +66,13 @@ export function RetentionCategoryBadges({ categories, className }: RetentionCate
 	}
 
 	return (
-		<HoverCard>
+		<HoverCard open={open} onOpenChange={setOpen}>
 			<HoverCardTrigger asChild>
 				<button
 					type="button"
 					className={cn("cursor-pointer bg-transparent p-0 border-0", className)}
 					aria-label={`View ${categories.length} retention categories`}
+					onClick={() => setOpen(true)}
 				>
 					<Badge category={`${categories.length} tags`} />
 				</button>