Move experiment scrollbar to bottom of page, make scenarios header sticky (#29)

* Remove newline from promptVariants router

* Move horizontal scroll bar to bottom of OutputsTable

* Make scenarios header sticky

src/components/OutputsTable/index.tsx

@@ -53,6 +53,9 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         rowSpan={headerRows}
         px={cellPadding.x}
         py={cellPadding.y}
+        // TODO: This is a hack to get the sticky header to work. It's not ideal because it's not responsive to the height of the header,
+        // so if the header height changes, this will need to be updated.
+        sx={{...stickyHeaderStyle, top: "-336px"}}
       >
         <HStack w="100%">
           <Heading size="xs" fontWeight="bold" flex={1}>

src/pages/experiments/[id].tsx

@@ -16,6 +16,7 @@ import {
   useDisclosure,
   Text,
   HStack,
+  VStack,
 } from "@chakra-ui/react";
 import Link from "next/link";
 
@@ -123,7 +124,7 @@ export default function Experiment() {
 
   return (
     <AppShell title={experiment.data?.label}>
-      <Box minH="100%" pb={50}>
+      <VStack h="full">
         <Flex
           px={4}
           py={2}
@@ -172,10 +173,10 @@ export default function Experiment() {
           </HStack>
         </Flex>
         <SettingsDrawer />
-        <Box w="100%" overflowX="auto">
+        <Box w="100%" overflowX="auto" flex={1}>
           <OutputsTable experimentId={router.query.id as string | undefined} />
         </Box>
-      </Box>
+      </VStack>
     </AppShell>
   );
 }

src/server/api/routers/promptVariants.router.ts

@@ -149,7 +149,6 @@ export const promptVariantsRouter = createTRPCRouter({
       ]);
   
       return updatedPromptVariant;
-
     }),
 
   hide: publicProcedure