(EAI-532) [UI] Fix spacing for headings and lists (#529)

mongodb · Oct 9, 2024 · 3d64de2 · 3d64de2
1 parent 4a54dae
commit 3d64de2
Showing 1 changed file with 13 additions and 29 deletions.
diff --git a/packages/mongodb-chatbot-ui/src/Message.tsx b/packages/mongodb-chatbot-ui/src/Message.tsx
@@ -74,42 +74,26 @@ const styles = {
     display: flex;
     flex-direction: column;
 
-    & * {
-      line-height: 28px;
-    }
-
-    & p {
-      font-weight: 400;
-    }
-
-    & a {
-      font-weight: 400;
-    }
-
     & li {
       white-space: normal;
-      margin-top: -1.5rem;
-
-      & li {
-        margin-top: 0;
+      margin-top: -1rem;
+      & ol li, & ul li {
+        margin-top: 0.5rem;
       }
     }
 
-    & code {
-      white-space: pre-wrap;
+    & ol, & ul {
+      overflow-wrap: anywhere;
     }
-  `,
-  // End hacky fix
-  markdown_list: css`
-    overflow-wrap: anywhere;
-    margin-bottom: -1.5rem;
 
-    & ul {
-      margin-bottom: 0;
+    & h1, & h2, & h3 {
+      & +ol, & +ul {
+        margin-top: 0;
+      }
     }
 
-    & ol {
-      margin-bottom: 0;
+    & p+h1, & p+h2, & p+h3 {
+      margin-top: 1rem;
     }
   `,
   loading_skeleton: css`
@@ -153,14 +137,14 @@ const markdownProps = {
     },
     ol: ({ children, ordered, ...props }) => {
       return (
-        <Body as="ol" className={styles.markdown_list} {...props}>
+        <Body as="ol" {...props}>
           {children}
         </Body>
       );
     },
     ul: ({ children, ordered, ...props }) => {
       return (
-        <Body className={styles.markdown_list} as="ul" {...props}>
+        <Body as="ul" {...props}>
           {children}
         </Body>
       );