Merge pull request #4 from corbt/output-formatting

Cease centering model output in cell

src/components/OutputsTable/ScenarioEditor.tsx

@@ -68,6 +68,7 @@ export default function ScenarioEditor({
 
   return (
     <HStack
+      alignItems="flex-start"
       pr={cellPadding.x}
       py={cellPadding.y}
       height="100%"
@@ -128,7 +129,7 @@ export default function ScenarioEditor({
                 alignItems={layoutDirection === "column" ? "flex-start" : "center"}
                 flexWrap="wrap"
               >
-                <Box bgColor="blue.100" color="blue.600" px={2} fontSize="xs" fontWeight="bold">
+                <Box bgColor="blue.100" color="blue.600" px={2} my="3px" fontSize="xs" fontWeight="bold">
                   {key}
                 </Box>
                 <Textarea

src/components/OutputsTable/index.tsx

@@ -1,4 +1,4 @@
-import { Center, Grid, GridItem, type SystemStyleObject } from "@chakra-ui/react";
+import { Box, Grid, GridItem, type SystemStyleObject } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { api } from "~/utils/api";
 import NewScenarioButton from "./NewScenarioButton";
@@ -42,9 +42,9 @@ const ScenarioRow = (props: { scenario: Scenario; variants: PromptVariant[] }) =
           onMouseLeave={() => setIsHovered(false)}
           sx={isHovered ? highlightStyle : undefined}
         >
-          <Center h="100%" w="100%" px={cellPadding.x} py={cellPadding.y}>
+          <Box h="100%" w="100%" px={cellPadding.x} py={cellPadding.y}>
             <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
-          </Center>
+          </Box>
         </GridItem>
       ))}
     </React.Fragment>