From ca2836ad3531a2e56cd2cd168e3af1e0c4742c1f Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 31 May 2024 15:51:22 -0400
Subject: [PATCH] add margin-left to list item text

---
 .../src/molecules/ChatDisplay/index.tsx           | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx
index 5c6b134b4fa..64eb5343580 100644
--- a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx
+++ b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx
@@ -66,7 +66,18 @@ export function ChatDisplay({ chat, chatId }: ChatDisplayProps): JSX.Element {
         position={POSITION_RELATIVE}
       >
         {isUser ? (
-          <Markdown>{reply}</Markdown>
+          <Markdown
+            components={{
+              div: undefined,
+              ul: UnnumberedListText,
+              h2: HeaderText,
+              li: ListItemText,
+              p: ParagraphText,
+              a: ExternalLink,
+            }}
+          >
+            {reply}
+          </Markdown>
         ) : (
           <Markdown
             components={{
@@ -125,7 +136,7 @@ function HeaderText(props: JSX.IntrinsicAttributes): JSX.Element {
 }
 
 function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
-  return <StyledText {...props} as="li" />
+  return <StyledText {...props} as="li" marginLeft={SPACING.spacing16} />
 }
 
 function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {