fix: ui breaking in case of too many sample inputs

.changeset/cyan-moons-sit.md

@@ -0,0 +1,6 @@
+---
+"web": patch
+"@empiricalrun/cli": patch
+---
+
+fix: ui breaking in case of too many sample inputs

apps/web/app/globals.css

@@ -73,4 +73,16 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }

apps/web/app/page.tsx

@@ -151,7 +151,7 @@ export default function Page(): JSX.Element {
         }}
       >
         {runResults?.length > 0 && (
-          <div className="flex bg-zinc-900 sticky top-0 z-20 min-w-fit">
+          <div className="flex bg-zinc-900 sticky top-0 z-20">
             <RunColumnHeaders
               showPrompt={(run: RunResult) =>
                 showRunDetails(activeRun?.id === run.id ? undefined : run)
@@ -174,49 +174,47 @@ export default function Page(): JSX.Element {
             return (
               <InViewElement
                 key={`run-sample-${r}`}
-                className=" flex flex-row items-stretch min-h-[150px] w-full"
+                className=" flex flex-row items-stretch min-h-[150px] w-full bg-zinc-900"
               >
-                <div className="flex flex-1 bg-zinc-900">
-                  <div className="flex items-stretch flex-1 min-w-[500px]">
-                    <SampleCard
-                      sample={inputSample!}
-                      inputTabs={datasetInputNames}
-                      onSampleAdd={(sample) => addDatasetSample(sample)}
-                      onSampleInputUpdate={updateDatasetSampleInput}
-                      onSampleRemove={(sample) => {
-                        if (dataset?.samples.length === 1) {
-                          toast.toast({
-                            title: "Cannot remove the last sample",
-                          });
-                        } else {
-                          removeDatasetSample(sample);
-                        }
-                      }}
-                      onClickRunOnAllModels={onClickRunOnAllModelsForSample}
-                      // TODO: show run button also when input is edited
-                      hasMissingCompletion={hasMissingCompletion}
+                <div className="flex flex-1 min-w-[500px] overflow-hidden">
+                  <SampleCard
+                    sample={inputSample!}
+                    inputTabs={datasetInputNames}
+                    onSampleAdd={(sample) => addDatasetSample(sample)}
+                    onSampleInputUpdate={updateDatasetSampleInput}
+                    onSampleRemove={(sample) => {
+                      if (dataset?.samples.length === 1) {
+                        toast.toast({
+                          title: "Cannot remove the last sample",
+                        });
+                      } else {
+                        removeDatasetSample(sample);
+                      }
+                    }}
+                    onClickRunOnAllModels={onClickRunOnAllModelsForSample}
+                    // TODO: show run button also when input is edited
+                    hasMissingCompletion={hasMissingCompletion}
+                  />
+                </div>
+                {sampleCells.map((sample, i) => (
+                  <div
+                    className="flex flex-1 min-w-[500px]"
+                    key={`sample-${r}-${i}`}
+                  >
+                    <SampleOutputCard
+                      baseResult={runColumnHeaders?.[i]?.runResult}
+                      baseSample={sample}
+                      comparisonResults={runColumnHeaders.map(
+                        (s) => s.runResult!,
+                      )}
+                      onClickCard={() =>
+                        showRunDetails(runColumnHeaders[i]?.runResult!, true)
+                      }
+                      comparisonSamples={sampleCells}
+                      isActiveColumn={runColumnHeaders[i]?.active}
                     />
                   </div>
-                  {sampleCells.map((sample, i) => (
-                    <div
-                      className="flex flex-1 items-stretch min-w-[500px]"
-                      key={`sample-${r}-${i}`}
-                    >
-                      <SampleOutputCard
-                        baseResult={runColumnHeaders?.[i]?.runResult}
-                        baseSample={sample}
-                        comparisonResults={runColumnHeaders.map(
-                          (s) => s.runResult!,
-                        )}
-                        onClickCard={() =>
-                          showRunDetails(runColumnHeaders[i]?.runResult!, true)
-                        }
-                        comparisonSamples={sampleCells}
-                        isActiveColumn={runColumnHeaders[i]?.active}
-                      />
-                    </div>
-                  ))}
-                </div>
+                ))}
               </InViewElement>
             );
           })}

apps/web/components/json-as-tab.tsx

@@ -50,7 +50,7 @@ export function JsonAsTab({
 
   return (
     <>
-      <div className="flex flex-row space-x-2 justify-end absolute right-4 top-4">
+      <div className="flex flex-row space-x-2 justify-end">
         <>
           {activeTabValue && (
             <Sheet>
@@ -118,7 +118,7 @@ export function JsonAsTab({
       </div>
       {tabs.length > 0 && (
         <Tabs value={activeTab} className="h-full" onValueChange={onChangeTab}>
-          <TabsList className=" rounded-sm">
+          <TabsList className=" rounded-sm w-full overflow-x-scroll justify-start no-scrollbar">
             {tabs.map((name) => (
               <TabsTrigger
                 key={name}

apps/web/components/run-completion-header.tsx

@@ -142,7 +142,7 @@ export const RunColumnHeaders = ({
                   className={`${overlayBg}`}
                 />
                 <section className="flex flex-row space-x-2 text-muted-foreground items-center mx-4 my-2">
-                  <section className="flex flex-row flex-1 text-xs gap-1 items-center">
+                  <section className="flex flex-row flex-1 text-xs gap-2 items-center flex-wrap">
                     {(header.runResult?.stats?.scores || []).map((s) => (
                       <>
                         <section className="flex flex-row gap-1 items-center">

apps/web/components/sample-card.tsx

@@ -24,10 +24,8 @@ export default function SampleCard({
   onClickRunOnAllModels: (sample: DatasetSample) => void;
 }) {
   return (
-    <Card
-      className={`flex flex-1 flex-col rounded-md items-stretch border-zinc-900`}
-    >
-      <CardContent className="flex flex-col flex-1 p-2 pb-0 items-stretch relative">
+    <Card className="flex flex-col rounded-md items-stretch border-zinc-900 w-full">
+      <CardContent className="flex flex-col flex-1 p-2 mt-1 pb-0 items-stretch relative">
         <JsonAsTab
           storeKey="input"
           data={sample?.inputs}

apps/web/components/sample-output-card.tsx

@@ -209,7 +209,7 @@ export default function SampleOutputCard({
         )}
       </CardHeader>
       <CardContent
-        className="flex flex-col h-full p-2 gap-2"
+        className="flex flex-col h-full p-4 gap-2"
         ref={containerWrapper}
       >
         <section className="flex flex-col">
@@ -260,7 +260,7 @@ export default function SampleOutputCard({
               orientation="horizontal"
               className="w-[60%] self-center"
             />
-            <p className=" text-sm font-medium mt-2 mb-2">Metadata</p>
+            <p className=" text-sm font-medium mt-2">Metadata</p>
             <section className="relative flex flex-col flex-1">
               <JsonAsTab
                 storeKey={baseResult?.id!}

apps/web/components/scores.tsx

@@ -9,9 +9,9 @@ export function Scores({ scores }: { scores: Score[] }) {
   const scoresPresent = !!scores?.length;
   const showExpandViewOption = scoresPresent && scores.some((s) => !!s.message);
   return (
-    <div className="flex flex-row flex-1 justify-start px-2 gap-2">
+    <div className="flex flex-row flex-1 justify-start pl-2 gap-2">
       <div
-        className={`flex ${expandState ? "flex-col flex-1" : "flex-row"} justify-start gap-2`}
+        className={`flex ${expandState ? "flex-col flex-1" : "flex-row flex-wrap"} justify-start gap-2`}
       >
         {scores?.map((s) => {
           if (!s) {