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
Arize-ai · Oct 24, 2024 · 99a3d1c · 99a3d1c
1 parent 2eae8c5
commit 99a3d1c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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>