feat: add TruncatedText component for handling text overflow with tooltip support

src/components/common/CategoryTag.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils';
+import { TruncatedText } from '@/components/ui/truncated-text';
 
 interface CategoryTagProps {
 	label?: string;
@@ -15,9 +16,12 @@ const CategoryTag: React.FC<CategoryTagProps> = ({
 				'inline-flex max-w-full items-center rounded-md border border-white/15 bg-white/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-white/80',
 				className
 			)}
-			title={label}
 		>
-			<span className="truncate">{label}</span>
+			<TruncatedText
+				text={label}
+				className="text-[10px] font-semibold uppercase tracking-[0.12em] text-white/80"
+				maxWidth={120}
+			/>
 		</span>
 	);
 };

src/components/common/MiniStatChip.tsx

@@ -1,5 +1,6 @@
 import { cn } from '@/lib/utils';
 import AccessibleInfoTrigger from '@/components/common/AccessibleInfoTrigger';
+import { TruncatedText } from '@/components/ui/truncated-text';
 
 interface MiniStatChipProps {
 	label: string;
@@ -30,9 +31,11 @@ const MiniStatChip: React.FC<MiniStatChipProps> = ({
 			<span className="shrink-0 uppercase tracking-[0.18em] text-white/42">
 				{label}
 			</span>
-			<span className="truncate font-jakarta text-xs font-semibold text-white">
-				{value}
-			</span>
+			<TruncatedText
+				text={value}
+				maxWidth={120}
+				className="font-jakarta text-xs font-semibold text-white"
+			/>
 			{explanation && (
 				<AccessibleInfoTrigger
 					explanation={explanation}

src/components/ui/truncated-text.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Tooltip } from './tooltip';
+
+interface TruncatedTextProps {
+  text: string;
+  maxWidth?: number | string;
+  className?: string;
+}
+
+export function TruncatedText({
+  text,
+  maxWidth = 120,
+  className,
+}: TruncatedTextProps) {
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const maxWidthValue = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+
+  useEffect(() => {
+    const node = textRef.current;
+    if (!node) return;
+
+    const updateTruncation = () => {
+      setIsTruncated(node.scrollWidth > node.clientWidth);
+    };
+
+    updateTruncation();
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(updateTruncation);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+
+    window.addEventListener('resize', updateTruncation);
+    return () => window.removeEventListener('resize', updateTruncation);
+  }, [text]);
+
+  const content = (
+    <span
+      ref={textRef}
+      className={cn(
+        'inline-block min-w-0 truncate whitespace-nowrap overflow-hidden',
+        className
+      )}
+      style={{ maxWidth: maxWidthValue }}
+      aria-label={text}
+    >
+      {text}
+    </span>
+  );
+
+  return isTruncated ? <Tooltip content={text}>{content}</Tooltip> : content;
+}