Remove scenarios header from output table card (#151)

app/src/components/OutputsTable/ScenarioRow.tsx

@@ -10,6 +10,7 @@ const ScenarioRow = (props: {
   variants: PromptVariant[];
   canHide: boolean;
   rowStart: number;
+  isFirst: boolean;
   isLast: boolean;
 }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -23,11 +24,13 @@ const ScenarioRow = (props: {
         onMouseLeave={() => setIsHovered(false)}
         sx={isHovered ? highlightStyle : undefined}
         bgColor="white"
-        borderLeftWidth={1}
-        {...borders}
         rowStart={props.rowStart}
         colStart={1}
+        borderLeftWidth={1}
+        borderTopWidth={props.isFirst ? 1 : 0}
+        borderTopLeftRadius={props.isFirst ? 8 : 0}
         borderBottomLeftRadius={props.isLast ? 8 : 0}
+        {...borders}
       >
         <ScenarioEditor scenario={props.scenario} hovered={isHovered} canHide={props.canHide} />
       </GridItem>
@@ -40,6 +43,8 @@ const ScenarioRow = (props: {
           bgColor="white"
           rowStart={props.rowStart}
           colStart={i + 2}
+          borderTopWidth={props.isFirst ? 1 : 0}
+          borderTopRightRadius={props.isFirst && i === props.variants.length - 1 ? 8 : 0}
           borderBottomRightRadius={props.isLast && i === props.variants.length - 1 ? 8 : 0}
           {...borders}
         >

app/src/components/OutputsTable/ScenariosHeader.tsx

@@ -48,20 +48,7 @@ export const ScenariosHeader = () => {
   );
 
   return (
-    <HStack
+    <HStack w="100%" py={cellPadding.y} px={cellPadding.x} align="center" spacing={0}>
-      w="100%"
-      py={cellPadding.y}
-      px={cellPadding.x}
-      align="center"
-      spacing={0}
-      borderTopRightRadius={8}
-      borderTopLeftRadius={8}
-      bgColor="white"
-      borderWidth={1}
-      borderBottomWidth={0}
-      borderColor="gray.300"
-      mt={8}
-    >
       <Text fontSize={16} fontWeight="bold">
         Scenarios ({scenarios.data?.count})
       </Text>

app/src/components/OutputsTable/index.tsx

@@ -86,7 +86,6 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         colSpan={allCols - 1}
         rowStart={variantHeaderRows + 1}
         colStart={1}
-        {...borders}
         borderRightWidth={0}
       >
         <ScenariosHeader />
@@ -99,6 +98,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           scenario={scenario}
           variants={variants.data}
           canHide={visibleScenariosCount > 1}
+          isFirst={i === 0}
           isLast={i === visibleScenariosCount - 1}
         />
       ))}