From f58a24be4e8aac0f23cf89c600f735a6e59a41da Mon Sep 17 00:00:00 2001
From: Sasha <aliaksandr@comet.com>
Date: Thu, 21 Nov 2024 22:39:33 +0100
Subject: [PATCH] [OPIK-438]: fix tailwind issues;

---
 .../CompareExperimentsPanel.tsx                 |  4 ++--
 .../CompareExperimentsViewer.tsx                | 17 ++++++++---------
 .../FeedbackScoresTab/ExperimentHeader.tsx      |  2 +-
 .../FeedbackScoresTab/FeedbackScoreCell.tsx     |  2 +-
 .../OutputTab/ExperimentDataset.tsx             |  3 ++-
 .../OutputTab/ExperimentDatasetItems.tsx        |  2 --
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
index 70d78feed4..09ff732d00 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
@@ -85,7 +85,7 @@ const CompareExperimentsPanel: React.FunctionComponent<
 
     return (
       <div className="relative size-full px-6">
-        <h2 className="comet-title-m pt-5 pb-3">
+        <h2 className="comet-title-m pb-3 pt-5">
           {isSeveralExperiments ? "Experiment items" : "Experiment item"}
         </h2>
 
@@ -103,7 +103,7 @@ const CompareExperimentsPanel: React.FunctionComponent<
           </TabsList>
           <TabsContent
             value="output"
-            className="mt-0 overflow-y-hidden overflow-x-auto h-[calc(100vh-60px-100px)]"
+            className="mt-0 h-[calc(100vh-60px-100px)] overflow-x-auto overflow-y-hidden"
           >
             <OutputTab
               data={data}
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer.tsx
index 2f126bb706..b8c6564718 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer.tsx
@@ -67,13 +67,17 @@ const CompareExperimentsViewer: React.FunctionComponent<
     return null;
   };
 
+  // ALEX
+  const tailwind1 = `h-[calc(100%-${SCORES_EDITOR_HEIGHT})] overflow-auto`;
+  const tailwind2 = `pt-4 pb-8 contain-content box-border overflow-auto h-[${SCORES_EDITOR_HEIGHT}]`;
+
   return (
-    <div className="relative py-6 px-3 h-full">
+    <div className="relative h-full px-3 py-6">
       <div className="flex items-center justify-between gap-2 pb-4">
         <TooltipWrapper content={name}>
           <div className="flex items-center gap-2">
             <FlaskConical className="size-4 shrink-0 text-muted-slate" />
-            <h2 className="comet-body-accented truncate flex">{name}</h2>
+            <h2 className="comet-body-accented truncate">{name}</h2>
           </div>
         </TooltipWrapper>
         {isTraceExist && (
@@ -90,15 +94,10 @@ const CompareExperimentsViewer: React.FunctionComponent<
         )}
       </div>
 
-      <div className={`h-[calc(100%-${SCORES_EDITOR_HEIGHT})] overflow-auto`}>
-        {renderOutput()}
-      </div>
+      <div className={tailwind1}>{renderOutput()}</div>
 
       {isTraceExist && (
-        <div
-          className={`pt-4 pb-8 contain-content box-border overflow-auto h-[${SCORES_EDITOR_HEIGHT}]`}
-          style={{ height: SCORES_EDITOR_HEIGHT }}
-        >
+        <div className={tailwind2} style={{ height: SCORES_EDITOR_HEIGHT }}>
           <FeedbackScoresEditor
             feedbackScores={feedbackScores}
             traceId={experimentItem.trace_id as string}
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/ExperimentHeader.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/ExperimentHeader.tsx
index f55907207b..d7bed76efd 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/ExperimentHeader.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/ExperimentHeader.tsx
@@ -28,7 +28,7 @@ const ExperimentHeader: React.FunctionComponent<
 
   return (
     <div
-      className="flex size-full items-center px-2 justify-end"
+      className="flex size-full items-center justify-end px-2"
       onClick={(e) => e.stopPropagation()}
     >
       {hasData && (
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/FeedbackScoreCell.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/FeedbackScoreCell.tsx
index d0363b53a4..d64bb7c23c 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/FeedbackScoreCell.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/FeedbackScoreCell.tsx
@@ -17,7 +17,7 @@ const FeedbackScoreCell = (context: CellContext<unknown, string>) => {
       className="gap-1.5"
     >
       <div
-        className="p-1 rounded-[0.15rem]"
+        className="rounded-[0.15rem] p-1"
         style={{ backgroundColor: color }}
       />
       <p className="comet-body-s-accented truncate text-light-slate">{value}</p>
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx
index f0029d09a6..de43a5b406 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx
@@ -45,8 +45,9 @@ const ExperimentDataset = ({ data }: ExperimentDatasetProps) => {
     });
   }, [dataKeys]);
 
+  //
   return (
-    <div className="pt-6 pr-6 h-full overflow-auto min-w-72 flex-1">
+    <div className="h-full min-w-72 flex-1 overflow-auto pr-6 pt-6">
       <div className="max-w-full">
         <div className="flex items-start justify-between pb-4">
           <p className="comet-body-accented">Dataset item</p>
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx
index 4a0b87a7eb..16556148d2 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx
@@ -31,8 +31,6 @@ const ExperimentDatasetItems = ({
     return pick(data, selectedKeys);
   }, [selectedKeys, data]);
 
-  // ALEX
-  // @ts-ignore
   const showImages = hasImages && selectedData?.["images"];
 
   if (!showImages) {