fix: Align vertical edge padding across playground message editors (#…

…5134)
Arize-ai · Oct 21, 2024 · dcc85cb · dcc85cb
1 parent 512f71d
commit dcc85cb
Showing 1 changed file with 22 additions and 9 deletions.
diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
@@ -221,8 +221,8 @@ function MessageEditor({
     return (
       <View
         paddingTop="size-100"
-        paddingStart="size-200"
-        paddingEnd="size-200"
+        paddingStart="size-250"
+        paddingEnd="size-250"
         paddingBottom="size-200"
       >
         <Field label={"Tool Calls"}>
@@ -281,13 +281,26 @@ function MessageEditor({
     );
   }
   return (
-    <TemplateEditor
-      height="100%"
-      value={message.content}
-      aria-label="Message content"
-      templateLanguage={templateLanguage}
-      onChange={(val) => updateMessage({ content: val })}
-    />
+    <div
+      css={css`
+        & .cm-content {
+          padding-left: var(--ac-global-dimension-size-250);
+          padding-right: var(--ac-global-dimension-size-250);
+        }
+        & .cm-line {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      `}
+    >
+      <TemplateEditor
+        height="100%"
+        value={message.content}
+        aria-label="Message content"
+        templateLanguage={templateLanguage}
+        onChange={(val) => updateMessage({ content: val })}
+      />
+    </div>
   );
 }