[OPIK-3525] [FE] Fix table layout breaking with long categorical feedback scores (#4490)

* [OPIK-3525] [FE] Fix table layout breaking with long categorical feedback scores

- Add min-w-0 and overflow-hidden to FeedbackScoreCellValue flex containers
- Add min-w-0 and truncate to FeedbackScoreTag value span
- Replace overflow-x-auto with truncate in FeedbackDefinitionsValueCell

This prevents long categorical feedback score names from breaking
the table layout in annotation queues and trace tables.

* Revision 2: Add tooltip to FeedbackDefinitionsValueCell for truncated content

Address PR review comment: Add CellTooltipWrapper to show full content
on hover when values are truncated.

* Revision 2: Add tooltip to FeedbackScoreCellValue for truncated scores

Author: Nimrod007

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

@@ -6,37 +6,42 @@ import {
   FeedbackDefinition,
 } from "@/types/feedback-definitions";
 import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
+import CellTooltipWrapper from "@/components/shared/DataTableCells/CellTooltipWrapper";
 
 const FeedbackDefinitionsValueCell = (
   context: CellContext<FeedbackDefinition, string>,
 ) => {
   const feedbackDefinition = context.row.original;
 
-  let items = null;
+  let items: React.ReactNode = null;
+  let tooltipContent: string | undefined;
 
   if (feedbackDefinition.type === FEEDBACK_DEFINITION_TYPE.categorical) {
-    items = Object.keys(feedbackDefinition.details.categories || [])
+    const categoryList = Object.keys(
+      feedbackDefinition.details.categories || [],
+    )
       .sort()
       .join(", ");
+    items = categoryList;
+    tooltipContent = categoryList;
   } else if (feedbackDefinition.type === FEEDBACK_DEFINITION_TYPE.numerical) {
-    items = (
-      <p>
-        Min: {feedbackDefinition.details.min}, Max:{" "}
-        {feedbackDefinition.details.max}
-      </p>
-    );
+    const numericText = `Min: ${feedbackDefinition.details.min}, Max: ${feedbackDefinition.details.max}`;
+    items = <p>{numericText}</p>;
+    tooltipContent = numericText;
   } else if (feedbackDefinition.type === FEEDBACK_DEFINITION_TYPE.boolean) {
-    items = `${feedbackDefinition.details.true_label}, ${feedbackDefinition.details.false_label}`;
+    const booleanText = `${feedbackDefinition.details.true_label}, ${feedbackDefinition.details.false_label}`;
+    items = booleanText;
+    tooltipContent = booleanText;
   }
 
   return (
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
     >
-      <div className="flex max-h-full flex-row gap-2 overflow-x-auto">
-        {items}
-      </div>
+      <CellTooltipWrapper content={tooltipContent}>
+        <div className="min-w-0 truncate">{items}</div>
+      </CellTooltipWrapper>
     </CellWrapper>
   );
 };

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

@@ -4,6 +4,7 @@ import { TAG_VARIANTS_COLOR_MAP } from "@/components/ui/tag";
 import { TraceFeedbackScore } from "@/types/traces";
 import { useState } from "react";
 import FeedbackScoreEditDropdown from "./FeedbackScoreEditDropdown";
+import CellTooltipWrapper from "./CellTooltipWrapper";
 
 const FeedbackScoreCellValue = ({
   isUserFeedbackColumn = false,
@@ -26,7 +27,7 @@ const FeedbackScoreCellValue = ({
   // If no feedback score, show only dash with optional edit button
   if (!feedbackScore) {
     return (
-      <div className="flex items-center gap-1">
+      <div className="flex min-w-0 items-center gap-1 overflow-hidden">
         {shouldShowEditDropdown && (
           <FeedbackScoreEditDropdown
             feedbackScore={feedbackScore}
@@ -46,8 +47,10 @@ const FeedbackScoreCellValue = ({
   const value = feedbackScore.value;
   const category = feedbackScore.category_name;
 
+  const displayText = category ? `${category} (${value})` : String(value);
+
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex min-w-0 items-center gap-1 overflow-hidden">
       {shouldShowEditDropdown && (
         <FeedbackScoreEditDropdown
           feedbackScore={feedbackScore}
@@ -63,9 +66,9 @@ const FeedbackScoreCellValue = ({
         open={openHoverCard}
         onOpenChange={setOpenHoverCard}
       >
-        <div className="truncate">
-          {category ? `${category} (${value})` : value}
-        </div>
+        <CellTooltipWrapper content={displayText}>
+          <div className="truncate">{displayText}</div>
+        </CellTooltipWrapper>
       </MultiValueFeedbackScoreHoverCard>
     </div>
   );

apps/opik-frontend/src/components/shared/FeedbackScoreTag/FeedbackScoreTag.tsx

@@ -97,7 +97,7 @@ const FeedbackScoreTag: React.FunctionComponent<FeedbackScoreTagProps> = ({
       {/* Value */}
       <span
         data-testid="feedback-score-tag-value"
-        className="comet-body-s-accented"
+        className="comet-body-s-accented min-w-0 truncate"
       >
         {displayValue}
       </span>