feat: add tooltip functionality for transaction memo display to enhance readability and user experience

components/transactions/transaction-table.tsx

@@ -11,6 +11,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { CategoryCombobox } from "@/components/ui/category-combobox";
 import {
   CheckCircle2,
@@ -48,6 +53,79 @@ interface TransactionTableProps {
 
 const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
 
+function DescriptionWithTooltip({ description }: { description: string }) {
+  const ref = useRef<HTMLParagraphElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      const element = ref.current;
+      if (!element) return;
+      
+      // Check if text is truncated by comparing scrollWidth and clientWidth
+      // Add a small threshold (1px) to account for rounding issues
+      const truncated = element.scrollWidth > element.clientWidth + 1;
+      setIsTruncated(truncated);
+    };
+
+    // Check multiple times to handle virtualization timing
+    checkTruncation();
+    const timeout1 = setTimeout(checkTruncation, 0);
+    const timeout2 = setTimeout(checkTruncation, 50);
+    const timeout3 = setTimeout(checkTruncation, 150);
+    const timeout4 = setTimeout(checkTruncation, 300);
+
+    // Use ResizeObserver to detect size changes
+    let resizeObserver: ResizeObserver | null = null;
+    if (ref.current && typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        // Small delay for ResizeObserver to ensure layout is complete
+        setTimeout(checkTruncation, 0);
+      });
+      resizeObserver.observe(ref.current);
+    }
+
+    return () => {
+      clearTimeout(timeout1);
+      clearTimeout(timeout2);
+      clearTimeout(timeout3);
+      clearTimeout(timeout4);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [description]);
+
+  const content = (
+    <span ref={ref} className="text-xs text-muted-foreground truncate block">
+      {description}
+    </span>
+  );
+
+  // Show tooltip if truncated or if description is reasonably long
+  const shouldShowTooltip = isTruncated || description.length > 25;
+
+  if (!shouldShowTooltip) {
+    return content;
+  }
+
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>
+        {content}
+      </TooltipTrigger>
+      <TooltipContent 
+        side="top" 
+        align="start"
+        className="max-w-md break-words"
+        sideOffset={5}
+      >
+        {description}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 export function TransactionTable({
   transactions,
   accounts,
@@ -235,14 +313,12 @@ export function TransactionTable({
                       <div className="p-3 text-sm text-muted-foreground whitespace-nowrap">
                         {formatDate(transaction.date)}
                       </div>
-                      <div className="p-3 min-w-0 overflow-hidden">
+                      <div className="p-3 min-w-0 overflow-hidden" onClick={(e) => e.stopPropagation()}>
                         <p className="font-medium text-sm truncate">
                           {transaction.description}
                         </p>
                         {transaction.memo && (
-                          <p className="text-xs text-muted-foreground truncate">
-                            {transaction.memo}
-                          </p>
+                          <DescriptionWithTooltip description={transaction.memo} />
                         )}
                       </div>
                       <div className="p-3 text-sm text-muted-foreground">