From 99a3d1c0d4adc0b9f64c493769c8c87f9f3d136f Mon Sep 17 00:00:00 2001
From: Parker Stafford <52351508+Parker-Stafford@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:09:34 -0700
Subject: [PATCH] fix(styles): make prompt section scrollable to the bottom
 (#5173)

* fix(styles): make prompt section scrollable to the bottom

* fix: add gap 200 between tool calls

* update css
---
 app/src/pages/playground/Playground.tsx       | 17 ++++++++++----
 app/src/pages/playground/PlaygroundTools.tsx  | 22 ++++++++++---------
 .../pages/playground/SpanPlaygroundPage.tsx   |  2 +-
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
index 5b085993ca..53c451d358 100644
--- a/app/src/pages/playground/Playground.tsx
+++ b/app/src/pages/playground/Playground.tsx
@@ -31,11 +31,18 @@ import { PlaygroundStreamToggle } from "./PlaygroundStreamToggle";
 import { PlaygroundTemplate } from "./PlaygroundTemplate";
 import { TemplateLanguageRadioGroup } from "./TemplateLanguageRadioGroup";
 
+const playgroundWrapCSS = css`
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  height: 100%;
+`;
+
 export function Playground(props: InitialPlaygroundState) {
   const showStreamToggle = useFeatureFlag("playgroundNonStreaming");
   return (
     <PlaygroundProvider {...props}>
-      <Flex direction="column" height="100%">
+      <div css={playgroundWrapCSS}>
         <View
           borderBottomColor="dark"
           borderBottomWidth="thin"
@@ -56,7 +63,7 @@ export function Playground(props: InitialPlaygroundState) {
           </Flex>
         </View>
         <PlaygroundContent />
-      </Flex>
+      </div>
     </PlaygroundProvider>
   );
 }
@@ -100,6 +107,8 @@ const playgroundPromptPanelContentCSS = css`
     flex: 1 1 auto;
     & > .ac-accordion-item {
       height: 100%;
+      display: flex;
+      flex-direction: column;
       overflow: hidden;
       flex: 1 1 auto;
       .ac-accordion-itemContent {
@@ -121,7 +130,7 @@ const playgroundInputOutputPanelContentCSS = css`
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: auto;
+  flex: 1 1 auto;
 `;
 
 function PlaygroundContent() {
@@ -152,7 +161,7 @@ function PlaygroundContent() {
                 </Flex>
               }
             >
-              <View height="100%" padding="size-200" paddingBottom="size-900">
+              <View height="100%" padding="size-200">
                 <Flex direction="row" gap="size-200">
                   {instances.map((instance) => (
                     <View key={instance.id} flex="1 1 0px">
diff --git a/app/src/pages/playground/PlaygroundTools.tsx b/app/src/pages/playground/PlaygroundTools.tsx
index 016502c886..c8f0eabfbc 100644
--- a/app/src/pages/playground/PlaygroundTools.tsx
+++ b/app/src/pages/playground/PlaygroundTools.tsx
@@ -64,16 +64,18 @@ export function PlaygroundTools(props: PlaygroundToolsProps) {
                 toolNames={toolNames}
               />
             </Form>
-            {tools.map((tool) => {
-              return (
-                <PlaygroundTool
-                  key={tool.id}
-                  playgroundInstanceId={instanceId}
-                  tool={tool}
-                  instanceTools={instance.tools}
-                />
-              );
-            })}
+            <Flex direction={"column"} gap={"size-200"}>
+              {tools.map((tool) => {
+                return (
+                  <PlaygroundTool
+                    key={tool.id}
+                    playgroundInstanceId={instanceId}
+                    tool={tool}
+                    instanceTools={instance.tools}
+                  />
+                );
+              })}
+            </Flex>
           </Flex>
         </View>
       </AccordionItem>
diff --git a/app/src/pages/playground/SpanPlaygroundPage.tsx b/app/src/pages/playground/SpanPlaygroundPage.tsx
index 14879be630..8e0e13fabb 100644
--- a/app/src/pages/playground/SpanPlaygroundPage.tsx
+++ b/app/src/pages/playground/SpanPlaygroundPage.tsx
@@ -26,7 +26,7 @@ export function SpanPlaygroundPage() {
   );
 
   return (
-    <Flex direction="column" height="100%">
+    <Flex direction="column" height={"100%"}>
       <SpanPlaygroundBanners span={span} parsingErrors={parsingErrors} />
       <Playground instances={[playgroundInstance]} />
     </Flex>