tbh probably spending too long making this pretty at this point

src/components/OutputsTable/EditableVariantLabel.tsx

@@ -31,6 +31,7 @@ export default function EditableVariantLabel(props: { variant: PromptVariant })
       _hover={{ borderColor: "gray.300" }}
       _focus={{ borderColor: "blue.500", outline: "none" }}
       onBlur={onBlur}
+      px={4}
       py={2}
     >
       {props.variant.label}

src/components/OutputsTable/OutputCell.tsx

@@ -1,6 +1,6 @@
 import { api } from "~/utils/api";
 import { PromptVariant, Scenario } from "./types";
-import { Center, Text } from "@chakra-ui/react";
+import { Center, Spinner, Text } from "@chakra-ui/react";
 import { useExperiment } from "~/utils/hooks";
 
 export default function OutputCell({
@@ -33,7 +33,12 @@ export default function OutputCell({
       </Center>
     );
 
-  if (output.isLoading) return <Center h="100%">Loading...</Center>;
+  if (output.isLoading)
+    return (
+      <Center h="100%">
+        <Spinner />
+      </Center>
+    );
 
   if (!output.data) return <Center h="100%">No output</Center>;
 

src/components/OutputsTable/ScenarioHeader.tsx

@@ -61,7 +61,7 @@ export default function ScenarioHeader({ scenario }: { scenario: Scenario }) {
               flex={layoutDirection === "row" ? 1 : undefined}
               borderColor={hasChanged ? "blue.300" : "transparent"}
               _hover={{ borderColor: "gray.300" }}
-              _focus={{ borderColor: "blue.500", outline: "none" }}
+              _focus={{ borderColor: "blue.500", outline: "none", bg: "white" }}
             />
           </Flex>
         );

src/components/OutputsTable/index.tsx

@@ -1,12 +1,42 @@
 import { RouterOutputs, api } from "~/utils/api";
-import { type PromptVariant } from "./types";
+import { Scenario, type PromptVariant } from "./types";
 import VariantHeader from "./VariantHeader";
 import OutputCell from "./OutputCell";
 import ScenarioHeader from "./ScenarioHeader";
-import React from "react";
+import React, { useState } from "react";
 import { Box, Grid, GridItem, Heading } from "@chakra-ui/react";
 import NewScenarioButton from "./NewScenarioButton";
 
+const ScenarioRow = (props: { scenario: Scenario; variants: PromptVariant[] }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const highlightStyle = {
+    backgroundColor: "gray.50", // or any color you prefer
+  };
+
+  return (
+    <React.Fragment>
+      <GridItem
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        sx={isHovered ? highlightStyle : null}
+      >
+        <ScenarioHeader scenario={props.scenario} />
+      </GridItem>
+      {props.variants.map((variant) => (
+        <GridItem
+          key={variant.id}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          sx={isHovered ? highlightStyle : null}
+        >
+          <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
+        </GridItem>
+      ))}
+    </React.Fragment>
+  );
+};
+
 export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
   const variants = api.promptVariants.list.useQuery(
     { experimentId: experimentId as string },
@@ -30,6 +60,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         "> *": {
           borderColor: "gray.300",
           borderBottomWidth: 1,
+          borderRightWidth: 1,
           paddingX: 4,
           paddingY: 2,
         },
@@ -44,23 +75,14 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         </Heading>
       </GridItem>
       {variants.data.map((variant) => (
-        <GridItem key={variant.uiId}>
+        <GridItem key={variant.uiId} padding={0}>
           <VariantHeader key={variant.uiId} variant={variant} />
         </GridItem>
       ))}
       {scenarios.data.map((scenario) => (
-        <React.Fragment key={scenario.uiId}>
+        <ScenarioRow key={scenario.uiId} scenario={scenario} variants={variants.data} />
-          <GridItem>
-            <ScenarioHeader scenario={scenario} />
-          </GridItem>
-          {variants.data.map((variant) => (
-            <GridItem key={variant.id}>
-              <OutputCell key={variant.id} scenario={scenario} variant={variant} />
-            </GridItem>
       ))}
-        </React.Fragment>
+      <GridItem borderBottomWidth={0} w="100%" colSpan={variants.data.length + 1} padding={0}>
-      ))}
-      <GridItem borderBottomWidth={0} w="100%" colSpan={variants.data.length + 1} px={0} py={0}>
         <NewScenarioButton />
       </GridItem>
     </Grid>