From 96dacb0378b70e65c3448a24548a6c17a185aef0 Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Mon, 10 Jul 2023 11:40:02 -0700
Subject: [PATCH] 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           | 3 +++
 src/pages/experiments/[id].tsx                  | 7 ++++---
 src/server/api/routers/promptVariants.router.ts | 1 -
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/OutputsTable/index.tsx b/src/components/OutputsTable/index.tsx
index 0042368..27fc2ba 100644
--- a/src/components/OutputsTable/index.tsx
+++ b/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}>
diff --git a/src/pages/experiments/[id].tsx b/src/pages/experiments/[id].tsx
index 9a646b5..0a2197a 100644
--- a/src/pages/experiments/[id].tsx
+++ b/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>
   );
 }
diff --git a/src/server/api/routers/promptVariants.router.ts b/src/server/api/routers/promptVariants.router.ts
index c90251d..7636107 100644
--- a/src/server/api/routers/promptVariants.router.ts
+++ b/src/server/api/routers/promptVariants.router.ts
@@ -149,7 +149,6 @@ export const promptVariantsRouter = createTRPCRouter({
       ]);
   
       return updatedPromptVariant;
-
     }),
 
   hide: publicProcedure