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 ( - +
- +
); } @@ -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() { } > - + {instances.map((instance) => ( 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} /> - {tools.map((tool) => { - return ( - - ); - })} + + {tools.map((tool) => { + return ( + + ); + })} + 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 ( - +