diff --git a/components/transactions/transaction-table.tsx b/components/transactions/transaction-table.tsx index b406c89..d6fba72 100644 --- a/components/transactions/transaction-table.tsx +++ b/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(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 = ( + + {description} + + ); + + // Show tooltip if truncated or if description is reasonably long + const shouldShowTooltip = isTruncated || description.length > 25; + + if (!shouldShowTooltip) { + return content; + } + + return ( + + + {content} + + + {description} + + + ); +} + export function TransactionTable({ transactions, accounts, @@ -235,14 +313,12 @@ export function TransactionTable({
{formatDate(transaction.date)}
-
+
e.stopPropagation()}>

{transaction.description}

{transaction.memo && ( -

- {transaction.memo} -

+ )}