[OPIK-438]: fix tailwind issues;

comet-ml · Nov 21, 2024 · f58a24b · f58a24b
1 parent 638e7ca
commit f58a24b
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 16 deletions.
diff --git a/...mponents/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx b/...mponents/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/...ponents/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer.tsx b/...ponents/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/...ges/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/ExperimentHeader.tsx b/...ges/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/...es/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/FeedbackScoreCell.tsx b/...es/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/...ents/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx b/...ents/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/...pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx b/...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) {