fix(playground): remove cascade of padding on prompts (#5556)

* restore scrollbar on prompts section * cleanup * remove cascade * fix(playground): remove cascade of padding * cleanup
Arize-ai · Nov 26, 2024 · 0eb1277 · 0eb1277
1 parent b121fe2
commit 0eb1277
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
@@ -191,23 +191,20 @@ const playgroundPromptPanelContentCSS = css`
         height: 100%;
         overflow: hidden;
         flex: 1 1 auto;
-        & > .ac-view {
-          // add scrollbar gutter to the right of the accordion item
-          scrollbar-gutter: stable;
-          // if scrollbar-gutter is not supported, add padding to the right of the accordion item
-          @supports not (scrollbar-gutter: stable) {
-            padding-right: 16px;
-          }
-          height: 100%;
-          flex: 1 1 auto;
-          overflow: auto;
-          box-sizing: border-box;
-        }
       }
     }
   }
 `;
 
+const promptsWrapCSS = css`
+  padding: var(--ac-global-dimension-size-200);
+  scrollbar-gutter: stable;
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: auto;
+  box-sizing: border-box;
+`;
+
 const playgroundInputOutputPanelContentCSS = css`
   height: 100%;
   overflow: auto;
@@ -277,8 +274,7 @@ function PlaygroundContent() {
                   </Flex>
                 }
               >
-                {/* No padding on the right of the accordion item, it is handled by the stable scrollbar gutter */}
-                <View height="100%" paddingY="size-200" paddingStart="size-200">
+                <div css={promptsWrapCSS}>
                   <Flex direction="row" gap="size-200" maxWidth="100%">
                     {instances.map((instance) => (
                       <View
@@ -293,7 +289,7 @@ function PlaygroundContent() {
                       </View>
                     ))}
                   </Flex>
-                </View>
+                </div>
               </AccordionItem>
             </Accordion>
           </div>

diff --git a/app/src/pages/playground/PlaygroundResponseFormat.tsx b/app/src/pages/playground/PlaygroundResponseFormat.tsx
@@ -9,7 +9,6 @@ import {
   Flex,
   Icon,
   Icons,
-  Text,
   View,
 } from "@arizeai/components";
 
@@ -92,11 +91,7 @@ export function PlaygroundResponseFormat({
         <View padding="size-200">
           <Card
             variant="compact"
-            title={
-              <Flex direction="row" gap="size-100">
-                <Text>Schema</Text>
-              </Flex>
-            }
+            title="Schema"
             bodyStyle={{ padding: 0 }}
             extra={
               <Flex direction="row" gap="size-100">