editing template variables works

src/components/OutputsTable/NewScenarioButton.tsx

@@ -18,7 +18,6 @@ export default function NewScenarioButton() {
   return (
     <Button
       w="100%"
-      borderRadius={0}
       alignItems="center"
       justifyContent="flex-start"
       fontWeight="normal"

src/components/OutputsTable/NewVariantButton.tsx

@@ -20,7 +20,6 @@ export default function NewVariantButton() {
   return (
     <Button
       w="100%"
-      borderRadius={0}
       alignItems="center"
       justifyContent="center"
       fontWeight="normal"

src/components/OutputsTable/ScenarioEditor.tsx

@@ -128,7 +128,6 @@ export default function ScenarioEditor({
                 {key}
               </Box>
               <Textarea
-                borderRadius={0}
                 px={2}
                 py={1}
                 placeholder="empty"
@@ -153,7 +152,6 @@ export default function ScenarioEditor({
           <HStack justify="right">
             <Button
               size="sm"
-              borderRadius={0}
               onMouseDown={() => {
                 setValues(savedValues);
               }}
@@ -161,7 +159,7 @@ export default function ScenarioEditor({
             >
               Reset
             </Button>
-            <Button size="sm" borderRadius={0} onMouseDown={onSave} colorScheme="blue">
+            <Button size="sm" onMouseDown={onSave} colorScheme="blue">
               Save
             </Button>
           </HStack>

src/components/OutputsTable/VariantConfigEditor.tsx

@@ -165,12 +165,11 @@ export default function VariantConfigEditor(props: { variant: PromptVariant }) {
               editorRef.current?.setValue(savedConfig);
               checkForChanges();
             }}
-            borderRadius={0}
           >
             Reset
           </Button>
           <Tooltip label={`${modifierKey} + Enter`}>
-            <Button size="sm" onClick={onSave} colorScheme="blue" borderRadius={0}>
+            <Button size="sm" onClick={onSave} colorScheme="blue">
               Save
             </Button>
           </Tooltip>

src/components/OutputsTable/VariantHeader.tsx

@@ -91,7 +91,7 @@ export default function VariantHeader(props: { variant: PromptVariant }) {
         px={cellPadding.x}
       />
       <Tooltip label="Hide Variant" hasArrow>
-        <Button variant="ghost" colorScheme="gray" size="sm" onClick={onHide} borderRadius={0}>
+        <Button variant="ghost" colorScheme="gray" size="sm" onClick={onHide}>
           <Icon as={BsX} boxSize={6} />
         </Button>
       </Tooltip>

src/components/OutputsTable/index.tsx

@@ -9,6 +9,7 @@ import VariantConfigEditor from "./VariantConfigEditor";
 import VariantHeader from "./VariantHeader";
 import type { Scenario, PromptVariant } from "./types";
 import { cellPadding } from "../constants";
+import ScenarioHeader from "~/server/ScenarioHeader";
 
 const stickyHeaderStyle: SystemStyleObject = {
   position: "sticky",
@@ -30,6 +31,7 @@ const ScenarioRow = (props: { scenario: Scenario; variants: PromptVariant[] }) =
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         sx={isHovered ? highlightStyle : undefined}
+        borderLeftWidth={1}
       >
         <ScenarioEditor scenario={props.scenario} hovered={isHovered} />
       </GridItem>
@@ -77,14 +79,10 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
       }}
     >
       <GridItem display="flex" alignItems="flex-end" rowSpan={2}>
-        <Box sx={stickyHeaderStyle} flex={1} px={cellPadding.x} py={cellPadding.y}>
-          <Heading size="sm" fontWeight="bold">
-            Scenario
-          </Heading>
-        </Box>
+        <ScenarioHeader />
       </GridItem>
       {variants.data.map((variant) => (
-        <GridItem key={variant.uiId} padding={0} sx={stickyHeaderStyle}>
+        <GridItem key={variant.uiId} padding={0} sx={stickyHeaderStyle} borderTopWidth={1}>
           <VariantHeader variant={variant} />
         </GridItem>
       ))}