From 704b8380f62c02cf67120364a993f8ecacc8623e Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 23 Oct 2025 15:02:54 -0500
Subject: [PATCH] refactor: replace HoverCard with Tooltip in StatusBadge

Simplifies the status information display by using the lighter-weight
Tooltip component instead of HoverCard, providing more immediate
feedback on hover while maintaining the same functionality.
---
 src/components/StatusBadge.tsx | 35 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx
index 915c53e..88e6ad9 100644
--- a/src/components/StatusBadge.tsx
+++ b/src/components/StatusBadge.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import type { RdapStatusType } from "@/rdap/schemas";
 import { rdapStatusColors, rdapStatusInfo } from "@/rdap/constants";
 import { QuestionMarkIcon } from "@radix-ui/react-icons";
-import { Badge, HoverCard, Text, Flex } from "@radix-ui/themes";
+import { Badge, Tooltip, Flex } from "@radix-ui/themes";
 
 export type StatusBadgeProps = {
 	status: RdapStatusType;
@@ -11,25 +11,20 @@ export type StatusBadgeProps = {
 
 const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ status }) => {
 	return (
-		<HoverCard.Root>
-			<HoverCard.Trigger>
-				<Badge
-					color={rdapStatusColors[status]}
-					variant="soft"
-					radius="full"
-					size="2"
-					style={{ cursor: "help" }}
-				>
-					<Flex align="center" gap="1">
-						{status}
-						<QuestionMarkIcon width="12" height="12" />
-					</Flex>
-				</Badge>
-			</HoverCard.Trigger>
-			<HoverCard.Content maxWidth="400px">
-				<Text size="2">{rdapStatusInfo[status]}</Text>
-			</HoverCard.Content>
-		</HoverCard.Root>
+		<Tooltip content={rdapStatusInfo[status]}>
+			<Badge
+				color={rdapStatusColors[status]}
+				variant="soft"
+				radius="full"
+				size="2"
+				style={{ cursor: "help" }}
+			>
+				<Flex align="center" gap="1">
+					{status}
+					<QuestionMarkIcon width="12" height="12" />
+				</Flex>
+			</Badge>
+		</Tooltip>
 	);
 };