OPIK-602 [UX improvements] Allow IDs to grow when column is resized (#…

…898)

apps/opik-frontend/src/components/shared/DataTableCells/IdCell.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from "react";
-import truncate from "lodash/truncate";
 import { CellContext } from "@tanstack/react-table";
 import { Copy } from "lucide-react";
 import copy from "clipboard-copy";
@@ -32,7 +31,7 @@ const IdCell = (context: CellContext<unknown, string>) => {
     >
       <TooltipWrapper content={value}>
         <div className="flex max-w-full items-center">
-          {truncate(value, { length: 9 })}
+          <div className="truncate">{value}</div>
           <Button
             size="icon-xs"
             variant="ghost"

apps/opik-frontend/src/components/shared/DataTableCells/LinkCell.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 import { CellContext } from "@tanstack/react-table";
+import { Copy } from "lucide-react";
+import copy from "clipboard-copy";
 
 import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 import { Button } from "@/components/ui/button";
-import truncate from "lodash/truncate";
-import { Copy } from "lucide-react";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
-import copy from "clipboard-copy";
 import { useToast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
 
@@ -46,7 +45,7 @@ const LinkCell = <TData,>(context: CellContext<TData, unknown>) => {
             className="block truncate px-0 leading-8"
             onClick={() => callback(context.row.original)}
           >
-            {asId ? truncate(value, { length: 9 }) : value}
+            {value}
           </Button>
           <Button
             size="icon-xs"