From f28476fd16fa473a411a0e31cb20c17b6a57b97f Mon Sep 17 00:00:00 2001
From: "andrii.dudar" <fanat.web@gmail.com>
Date: Tue, 19 Nov 2024 12:12:02 +0100
Subject: [PATCH] [OPIK-378] Update styling of table row items

---
 .../CompareExperimentsCell.tsx                |  4 ++--
 .../ExperimentItemsTab/ExperimentItemsTab.tsx |  5 ++++
 .../DatasetItemRowActionsCell.tsx             | 14 ++++++-----
 .../DatasetsPage/DatasetRowActionsCell.tsx    | 14 ++++++-----
 .../ExperimentRowActionsCell.tsx              | 14 ++++++-----
 .../pages/ExperimentsShared/table.tsx         |  4 ++--
 .../FeedbackDefinitionsRowActionsCell.tsx     | 14 ++++++-----
 .../FeedbackDefinitionsValueCell.tsx          |  1 -
 .../ProjectsPage/ProjectRowActionsCell.tsx    | 18 ++++++++-------
 .../PromptsPage/PromptRowActionsCell.tsx      | 14 ++++++-----
 .../components/shared/DataTable/DataTable.tsx |  1 +
 .../DataTable/DataTableColumnResizer.tsx      |  2 +-
 .../src/components/shared/DataTable/utils.tsx | 23 ++++++++++++-------
 .../shared/DataTableCells/CellWrapper.tsx     | 19 +++++++++++----
 .../shared/DataTableCells/CodeCell.tsx        | 15 ++++++------
 .../DataTableCells/FeedbackScoresCell.tsx     |  1 -
 .../shared/DataTableCells/LinkCell.tsx        |  2 +-
 .../shared/DataTableCells/ListCell.tsx        |  1 -
 .../shared/DataTableCells/ResourceCell.tsx    |  1 +
 .../shared/DataTableHeaders/TypeHeader.tsx    |  2 +-
 .../opik-frontend/src/components/ui/table.tsx |  2 +-
 apps/opik-frontend/src/constants/shared.ts    |  4 ++--
 apps/opik-frontend/src/lib/table.ts           |  3 +++
 apps/opik-frontend/src/types/shared.ts        |  1 +
 24 files changed, 107 insertions(+), 72 deletions(-)

diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsCell.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsCell.tsx
index 6d69c63c0f..e37959e4e0 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsCell.tsx
@@ -79,11 +79,11 @@ const CompareExperimentsCell: React.FunctionComponent<
         })}
       </div>
       {isSmall ? (
-        <div className="comet-code flex w-full flex-auto items-center truncate rounded-md border bg-[#FBFCFD] px-2 py-1.5">
+        <div className="comet-code flex w-full flex-auto items-center truncate">
           {JSON.stringify(item.output, null, 2)}
         </div>
       ) : (
-        <div className="w-full flex-auto whitespace-normal rounded-md border bg-[#FBFCFD] p-2">
+        <div className="w-full flex-auto whitespace-normal">
           {item.output && (
             <JsonView
               src={item.output}
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
index 0605a735cf..62f812a26d 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
@@ -16,6 +16,7 @@ import { ColumnPinningState } from "@tanstack/react-table";
 import useLocalStorageState from "use-local-storage-state";
 
 import {
+  CELL_VERTICAL_ALIGNMENT,
   COLUMN_ID_ID,
   COLUMN_TYPE,
   ColumnData,
@@ -203,6 +204,8 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
           type: columnType,
           accessorFn: (row) => get(row, ["data", label], ""),
           cell: AutodetectCell as never,
+          verticalAlignment: CELL_VERTICAL_ALIGNMENT.start,
+          overrideRowHeight: ROW_HEIGHT.large,
         }) as ColumnData<ExperimentsCompare>,
     );
 
@@ -211,6 +214,7 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
       label: "Created",
       type: COLUMN_TYPE.time,
       accessorFn: (row) => formatDate(row.created_at),
+      verticalAlignment: CELL_VERTICAL_ALIGNMENT.start,
     });
 
     return retVal;
@@ -231,6 +235,7 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
         type: COLUMN_TYPE.string,
         size: columnsWidth[COLUMN_ID_ID],
         cell: LinkCell as never,
+        verticalAlignment: CELL_VERTICAL_ALIGNMENT.start,
         customMeta: {
           callback: handleRowClick,
           asId: true,
diff --git a/apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemRowActionsCell.tsx b/apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemRowActionsCell.tsx
index 3904049c94..65ce5d9064 100644
--- a/apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemRowActionsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemRowActionsCell.tsx
@@ -13,13 +13,14 @@ import { useDatasetIdFromURL } from "@/hooks/useDatasetIdFromURL";
 import useAppStore from "@/store/AppStore";
 import useDatasetItemDeleteMutation from "@/api/datasets/useDatasetItemDeleteMutation";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 export const DatasetItemRowActionsCell: React.FunctionComponent<
   CellContext<DatasetItem, unknown>
-> = ({ row }) => {
+> = (context) => {
   const datasetId = useDatasetIdFromURL();
   const resetKeyRef = useRef(0);
-  const datasetItem = row.original;
+  const datasetItem = context.row.original;
   const [open, setOpen] = useState<boolean | number>(false);
 
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
@@ -36,9 +37,10 @@ export const DatasetItemRowActionsCell: React.FunctionComponent<
   }, [datasetItem.id, datasetId, workspaceName]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -68,6 +70,6 @@ export const DatasetItemRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
diff --git a/apps/opik-frontend/src/components/pages/DatasetsPage/DatasetRowActionsCell.tsx b/apps/opik-frontend/src/components/pages/DatasetsPage/DatasetRowActionsCell.tsx
index 2ef9037bca..66095a96f0 100644
--- a/apps/opik-frontend/src/components/pages/DatasetsPage/DatasetRowActionsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/DatasetsPage/DatasetRowActionsCell.tsx
@@ -11,12 +11,13 @@ import { CellContext } from "@tanstack/react-table";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import { Dataset } from "@/types/datasets";
 import useDatasetDeleteMutation from "@/api/datasets/useDatasetDeleteMutation";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 export const DatasetRowActionsCell: React.FunctionComponent<
   CellContext<Dataset, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const dataset = row.original;
+  const dataset = context.row.original;
   const [open, setOpen] = useState<boolean>(false);
 
   const datasetDeleteMutation = useDatasetDeleteMutation();
@@ -29,9 +30,10 @@ export const DatasetRowActionsCell: React.FunctionComponent<
   }, [dataset.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -61,6 +63,6 @@ export const DatasetRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
diff --git a/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentRowActionsCell.tsx b/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentRowActionsCell.tsx
index d22079672f..f596078465 100644
--- a/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentRowActionsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentRowActionsCell.tsx
@@ -11,12 +11,13 @@ import { CellContext } from "@tanstack/react-table";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import useExperimentBatchDeleteMutation from "@/api/datasets/useExperimentBatchDeleteMutation";
 import { GroupedExperiment } from "@/hooks/useGroupedExperimentsList";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 const ExperimentRowActionsCell: React.FunctionComponent<
   CellContext<GroupedExperiment, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const experiment = row.original;
+  const experiment = context.row.original;
   const [open, setOpen] = useState<boolean>(false);
 
   const experimentBatchDeleteMutation = useExperimentBatchDeleteMutation();
@@ -29,9 +30,10 @@ const ExperimentRowActionsCell: React.FunctionComponent<
   }, [experiment]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -61,7 +63,7 @@ const ExperimentRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
 
diff --git a/apps/opik-frontend/src/components/pages/ExperimentsShared/table.tsx b/apps/opik-frontend/src/components/pages/ExperimentsShared/table.tsx
index 9ec26d80d1..ae52b38f19 100644
--- a/apps/opik-frontend/src/components/pages/ExperimentsShared/table.tsx
+++ b/apps/opik-frontend/src/components/pages/ExperimentsShared/table.tsx
@@ -108,7 +108,7 @@ export const generateGroupedCellDef = <TData, TValue>(
     cell: (context: CellContext<TData, TValue>) => {
       const { row, cell } = context;
       return (
-        <div className="flex size-full h-14 items-center">
+        <div className="flex size-full h-11 items-center">
           <div className="flex shrink-0 items-center">
             <Checkbox
               onClick={(event) => event.stopPropagation()}
@@ -189,7 +189,7 @@ export const renderCustomRow = (
   } else {
     return (
       <tr key={row.id} className="border-b">
-        <td colSpan={row.getAllCells().length} className="px-2 py-1">
+        <td colSpan={row.getAllCells().length}>
           <Button
             variant="link"
             className="w-full"
diff --git a/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsRowActionsCell.tsx b/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsRowActionsCell.tsx
index d9a1908067..3c668047a5 100644
--- a/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsRowActionsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsRowActionsCell.tsx
@@ -13,12 +13,13 @@ import { FeedbackDefinition } from "@/types/feedback-definitions";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import useFeedbackDefinitionDeleteMutation from "@/api/feedback-definitions/useFeedbackDefinitionDeleteMutation";
 import AddEditFeedbackDefinitionDialog from "@/components/shared/AddEditFeedbackDefinitionDialog/AddEditFeedbackDefinitionDialog";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 const FeedbackDefinitionsRowActionsCell: React.FunctionComponent<
   CellContext<FeedbackDefinition, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const feedbackDefinition = row.original;
+  const feedbackDefinition = context.row.original;
   const [open, setOpen] = useState<boolean | number>(false);
 
   const feedbackDefinitionDeleteMutation =
@@ -32,9 +33,10 @@ const FeedbackDefinitionsRowActionsCell: React.FunctionComponent<
   }, [feedbackDefinition.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <AddEditFeedbackDefinitionDialog
         key={`edit-${resetKeyRef.current}`}
@@ -79,7 +81,7 @@ const FeedbackDefinitionsRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
 
diff --git a/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsValueCell.tsx b/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsValueCell.tsx
index 5c9ba9c35e..e7ef798c3b 100644
--- a/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsValueCell.tsx
+++ b/apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsValueCell.tsx
@@ -45,7 +45,6 @@ const FeedbackDefinitionsValueCell = (
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
-      className="py-1"
     >
       <div className="flex max-h-full flex-row gap-2 overflow-x-auto">
         {items}
diff --git a/apps/opik-frontend/src/components/pages/ProjectsPage/ProjectRowActionsCell.tsx b/apps/opik-frontend/src/components/pages/ProjectsPage/ProjectRowActionsCell.tsx
index ccd955f7b2..7e53da1262 100644
--- a/apps/opik-frontend/src/components/pages/ProjectsPage/ProjectRowActionsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/ProjectsPage/ProjectRowActionsCell.tsx
@@ -12,12 +12,13 @@ import { CellContext } from "@tanstack/react-table";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import useProjectDeleteMutation from "@/api/projects/useProjectDeleteMutation";
 import { DEFAULT_PROJECT_NAME } from "@/constants/projects";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
-export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = ({
-  row,
-}) => {
+export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = (
+  context,
+) => {
   const resetKeyRef = useRef(0);
-  const project = row.original;
+  const project = context.row.original;
   const [open, setOpen] = useState<boolean>(false);
 
   const projectDeleteMutation = useProjectDeleteMutation();
@@ -30,9 +31,10 @@ export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = ({
   }, [project.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -63,6 +65,6 @@ export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = ({
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
diff --git a/apps/opik-frontend/src/components/pages/PromptsPage/PromptRowActionsCell.tsx b/apps/opik-frontend/src/components/pages/PromptsPage/PromptRowActionsCell.tsx
index 8efbb2214e..f11b080242 100644
--- a/apps/opik-frontend/src/components/pages/PromptsPage/PromptRowActionsCell.tsx
+++ b/apps/opik-frontend/src/components/pages/PromptsPage/PromptRowActionsCell.tsx
@@ -12,15 +12,16 @@ import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import { Prompt } from "@/types/prompts";
 import usePromptDeleteMutation from "@/api/prompts/usePromptDeleteMutation";
 import AddEditPromptDialog from "@/components/pages/PromptsPage/AddEditPromptDialog";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 const EDIT_KEY = 1;
 const DELETE_KEY = 2;
 
 export const PromptRowActionsCell: React.FunctionComponent<
   CellContext<Prompt, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const prompt = row.original;
+  const prompt = context.row.original;
   const [open, setOpen] = useState<number | boolean>(false);
 
   const promptDeleteMutation = usePromptDeleteMutation();
@@ -33,9 +34,10 @@ export const PromptRowActionsCell: React.FunctionComponent<
   }, [prompt.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <AddEditPromptDialog
         key={`edit-${resetKeyRef.current}`}
@@ -82,6 +84,6 @@ export const PromptRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
diff --git a/apps/opik-frontend/src/components/shared/DataTable/DataTable.tsx b/apps/opik-frontend/src/components/shared/DataTable/DataTable.tsx
index 2b2545d6ea..fea70b1264 100644
--- a/apps/opik-frontend/src/components/shared/DataTable/DataTable.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTable/DataTable.tsx
@@ -54,6 +54,7 @@ declare module "@tanstack/react-table" {
     header?: string;
     iconType?: COLUMN_TYPE;
     verticalAlignment?: CELL_VERTICAL_ALIGNMENT;
+    overrideRowHeight?: ROW_HEIGHT;
     custom?: object;
   }
 }
diff --git a/apps/opik-frontend/src/components/shared/DataTable/DataTableColumnResizer.tsx b/apps/opik-frontend/src/components/shared/DataTable/DataTableColumnResizer.tsx
index 09c006abd8..81a2bb87b8 100644
--- a/apps/opik-frontend/src/components/shared/DataTable/DataTableColumnResizer.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTable/DataTableColumnResizer.tsx
@@ -26,7 +26,7 @@ const DataTableColumnResizer = <TData,>({
         header.column.getIsLastColumn() ? "right-0" : "-right-1",
       )}
     >
-      <div className="absolute top-3.5 h-5 w-px bg-border"></div>
+      <div className="absolute top-3 h-5 w-px bg-border"></div>
       <div className="absolute inset-y-0 w-px bg-transparent transition-colors group-hover:bg-gray-600 group-active:bg-blue-600"></div>
     </div>
   );
diff --git a/apps/opik-frontend/src/components/shared/DataTable/utils.tsx b/apps/opik-frontend/src/components/shared/DataTable/utils.tsx
index 5c6b087bdd..377a9df0ac 100644
--- a/apps/opik-frontend/src/components/shared/DataTable/utils.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTable/utils.tsx
@@ -16,6 +16,7 @@ import {
   COLUMN_SELECT_ID,
   ROW_HEIGHT,
 } from "@/types/shared";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 export const calculateHeightClass = (rowHeight: ROW_HEIGHT) => {
   return ROW_HEIGHT_MAP[rowHeight];
@@ -69,14 +70,20 @@ export const generateSelectColumDef = <TData,>() => {
         aria-label="Select all"
       />
     ),
-    cell: ({ row }) => (
-      <Checkbox
-        onClick={(event) => event.stopPropagation()}
-        checked={row.getIsSelected()}
-        disabled={!row.getCanSelect()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
+    cell: (context) => (
+      <CellWrapper
+        metadata={context.column.columnDef.meta}
+        tableMetadata={context.table.options.meta}
+        className="px-0 py-3.5"
+      >
+        <Checkbox
+          onClick={(event) => event.stopPropagation()}
+          checked={context.row.getIsSelected()}
+          disabled={!context.row.getCanSelect()}
+          onCheckedChange={(value) => context.row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </CellWrapper>
     ),
     size: 50,
     enableResizing: false,
diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/CellWrapper.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/CellWrapper.tsx
index e9d9753ad9..ccf66242de 100644
--- a/apps/opik-frontend/src/components/shared/DataTableCells/CellWrapper.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableCells/CellWrapper.tsx
@@ -1,7 +1,11 @@
 import React from "react";
 import { ColumnMeta, TableMeta } from "@tanstack/react-table";
 import { CELL_VERTICAL_ALIGNMENT_MAP } from "@/constants/shared";
-import { CELL_VERTICAL_ALIGNMENT, COLUMN_TYPE } from "@/types/shared";
+import {
+  CELL_VERTICAL_ALIGNMENT,
+  COLUMN_TYPE,
+  ROW_HEIGHT,
+} from "@/types/shared";
 import { cn } from "@/lib/utils";
 
 type CellWrapperProps = {
@@ -17,9 +21,14 @@ const CellWrapper: React.FunctionComponent<CellWrapperProps> = ({
   tableMetadata,
   className,
 }) => {
-  const { verticalAlignment = CELL_VERTICAL_ALIGNMENT.center, type } =
-    metadata || {};
-  const { rowHeightClass } = tableMetadata || {};
+  const { type } = metadata || {};
+  const { rowHeight, rowHeightClass } = tableMetadata || {};
+
+  const verticalAlignment =
+    metadata?.verticalAlignment ??
+    (rowHeight === ROW_HEIGHT.small
+      ? CELL_VERTICAL_ALIGNMENT.center
+      : CELL_VERTICAL_ALIGNMENT.start);
 
   const verticalAlignClass = CELL_VERTICAL_ALIGNMENT_MAP[verticalAlignment];
   const horizontalAlignClass =
@@ -28,7 +37,7 @@ const CellWrapper: React.FunctionComponent<CellWrapperProps> = ({
   return (
     <div
       className={cn(
-        "flex size-full p-2",
+        "flex size-full py-2 px-3",
         rowHeightClass,
         verticalAlignClass,
         horizontalAlignClass,
diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/CodeCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/CodeCell.tsx
index 42fcd6c741..a8d2c8d001 100644
--- a/apps/opik-frontend/src/components/shared/DataTableCells/CodeCell.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableCells/CodeCell.tsx
@@ -8,18 +8,18 @@ const CodeCell = (context: CellContext<unknown, unknown>) => {
   const value = context.getValue() as string;
   if (!value) return "";
 
-  const rowHeight = context.table.options.meta?.rowHeight ?? ROW_HEIGHT.small;
+  const rowHeight =
+    context.column.columnDef.meta?.overrideRowHeight ??
+    context.table.options.meta?.rowHeight ??
+    ROW_HEIGHT.small;
+
   let content;
 
   if (rowHeight === ROW_HEIGHT.small) {
-    content = (
-      <code className="comet-code w-full truncate rounded-md border bg-[#FBFCFD] px-2 py-3">
-        {value}
-      </code>
-    );
+    content = <code className="comet-code w-full truncate">{value}</code>;
   } else {
     content = (
-      <div className="size-full overflow-y-auto overflow-x-hidden whitespace-normal rounded-md border bg-[#FBFCFD] p-2">
+      <div className="size-full overflow-y-auto overflow-x-hidden whitespace-normal">
         <JsonView
           src={safelyParseJSON(value)}
           theme="github"
@@ -33,7 +33,6 @@ const CodeCell = (context: CellContext<unknown, unknown>) => {
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
-      className="py-1.5"
     >
       {content}
     </CellWrapper>
diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/FeedbackScoresCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/FeedbackScoresCell.tsx
index 1ad113408e..b32243c808 100644
--- a/apps/opik-frontend/src/components/shared/DataTableCells/FeedbackScoresCell.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableCells/FeedbackScoresCell.tsx
@@ -20,7 +20,6 @@ const FeedbackScoresCell = (context: CellContext<unknown, unknown>) => {
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
-      className="py-1"
     >
       <div
         className={cn(
diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/LinkCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/LinkCell.tsx
index d1714b92f9..114622f729 100644
--- a/apps/opik-frontend/src/components/shared/DataTableCells/LinkCell.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableCells/LinkCell.tsx
@@ -36,7 +36,7 @@ const LinkCell = <TData,>(context: CellContext<TData, unknown>) => {
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
-      className="group"
+      className="group py-1"
     >
       <TooltipWrapper content={value}>
         <div className="flex max-w-full items-center">
diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/ListCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/ListCell.tsx
index 75d998d4a9..f42700762d 100644
--- a/apps/opik-frontend/src/components/shared/DataTableCells/ListCell.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableCells/ListCell.tsx
@@ -18,7 +18,6 @@ const ListCell = (context: CellContext<unknown, unknown>) => {
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
-      className="py-1"
     >
       <div
         className={cn(
diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/ResourceCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/ResourceCell.tsx
index b1ba9db65a..cb2c9b28cc 100644
--- a/apps/opik-frontend/src/components/shared/DataTableCells/ResourceCell.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableCells/ResourceCell.tsx
@@ -36,6 +36,7 @@ const ResourceCell = (context: CellContext<unknown, string>) => {
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
+      className="py-1.5"
     >
       <ResourceLink id={id} name={name} resource={resource} search={search} />
     </CellWrapper>
diff --git a/apps/opik-frontend/src/components/shared/DataTableHeaders/TypeHeader.tsx b/apps/opik-frontend/src/components/shared/DataTableHeaders/TypeHeader.tsx
index ba0161e415..3a4a3967cf 100644
--- a/apps/opik-frontend/src/components/shared/DataTableHeaders/TypeHeader.tsx
+++ b/apps/opik-frontend/src/components/shared/DataTableHeaders/TypeHeader.tsx
@@ -68,7 +68,7 @@ export const TypeHeader = <TData,>({
           : (e) => e.stopPropagation()
       }
     >
-      {Boolean(Icon) && <Icon className="mr-1 size-4 shrink-0" />}
+      {Boolean(Icon) && <Icon className="size-3.5 shrink-0 text-slate-300" />}
       <span className="truncate">{header}</span>
       {renderSort()}
     </div>
diff --git a/apps/opik-frontend/src/components/ui/table.tsx b/apps/opik-frontend/src/components/ui/table.tsx
index a02915f3f4..746eb7ab29 100644
--- a/apps/opik-frontend/src/components/ui/table.tsx
+++ b/apps/opik-frontend/src/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "relative h-12 p-0 text-left align-middle font-medium text-light-slate [&:has([role=checkbox])]:pr-0 first:pl-5 last:pr-5",
+      "relative h-11 p-0 text-left align-middle font-medium text-light-slate [&:has([role=checkbox])]:pr-0 first:pl-5 last:pr-5",
       className,
     )}
     {...props}
diff --git a/apps/opik-frontend/src/constants/shared.ts b/apps/opik-frontend/src/constants/shared.ts
index 4d0221b9eb..9f8b4a2a4c 100644
--- a/apps/opik-frontend/src/constants/shared.ts
+++ b/apps/opik-frontend/src/constants/shared.ts
@@ -4,8 +4,8 @@ export const TABLE_HEADER_Z_INDEX = 2;
 export const TABLE_ROW_Z_INDEX = 0;
 
 export const ROW_HEIGHT_MAP = {
-  [ROW_HEIGHT.small]: "h-14",
-  [ROW_HEIGHT.medium]: "h-[120px]",
+  [ROW_HEIGHT.small]: "h-11",
+  [ROW_HEIGHT.medium]: "h-24",
   [ROW_HEIGHT.large]: "h-[296px]",
 };
 
diff --git a/apps/opik-frontend/src/lib/table.ts b/apps/opik-frontend/src/lib/table.ts
index 36082a39b4..1b2888d58c 100644
--- a/apps/opik-frontend/src/lib/table.ts
+++ b/apps/opik-frontend/src/lib/table.ts
@@ -64,6 +64,9 @@ export const mapColumnDataFields = <TColumnData, TData>(
       ...(columnData.verticalAlignment && {
         verticalAlignment: columnData.verticalAlignment,
       }),
+      ...(columnData.overrideRowHeight && {
+        overrideRowHeight: columnData.overrideRowHeight,
+      }),
       ...(columnData.customMeta && { custom: columnData.customMeta }),
     },
     ...(columnData.size && { size: columnData.size }),
diff --git a/apps/opik-frontend/src/types/shared.ts b/apps/opik-frontend/src/types/shared.ts
index 7835edd10c..cccf97ef38 100644
--- a/apps/opik-frontend/src/types/shared.ts
+++ b/apps/opik-frontend/src/types/shared.ts
@@ -43,6 +43,7 @@ export type ColumnData<T> = {
   iconType?: COLUMN_TYPE;
   cell?: Cell<T, unknown>;
   verticalAlignment?: CELL_VERTICAL_ALIGNMENT;
+  overrideRowHeight?: ROW_HEIGHT;
   sortable?: boolean;
 };