Reduce list spacing (#4177)

Co-authored-by: Robert Brennan <accounts@rbren.io>

frontend/src/components/chat/ChatMessage.tsx

@@ -9,6 +9,7 @@ import toast from "#/utils/toast";
 import { I18nKey } from "#/i18n/declaration";
 import ConfirmationButtons from "./ConfirmationButtons";
 import { formatTimestamp } from "#/utils/utils";
+import { ol, ul } from "../markdown/list";
 
 interface MessageProps {
   message: Message;
@@ -89,7 +90,15 @@ function ChatMessage({
           {isCopy ? <FaClipboardCheck /> : <FaClipboard />}
         </button>
       )}
-      <Markdown components={{ code }} remarkPlugins={[remarkGfm]}>
+      <Markdown
+        className="-space-y-4"
+        components={{
+          code,
+          ul,
+          ol,
+        }}
+        remarkPlugins={[remarkGfm]}
+      >
         {message.content}
       </Markdown>
       {(message.imageUrls?.length ?? 0) > 0 && (

frontend/src/components/markdown/list.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ExtraProps } from "react-markdown";
+
+// Custom component to render <ul> in markdown
+export function ul({
+  children,
+}: React.ClassAttributes<HTMLElement> &
+  React.HTMLAttributes<HTMLElement> &
+  ExtraProps) {
+  return <ul className="list-disc ml-5 pl-2 whitespace-normal">{children}</ul>;
+}
+
+// Custom component to render <ol> in markdown
+export function ol({
+  children,
+}: React.ClassAttributes<HTMLElement> &
+  React.HTMLAttributes<HTMLElement> &
+  ExtraProps) {
+  return (
+    <ol className="list-decimal ml-5 pl-2 whitespace-normal">{children}</ol>
+  );
+}

frontend/src/index.css

@@ -45,18 +45,6 @@ code {
   white-space: pre-wrap; /* Handles line breaks */
 }
 
-.markdown-body ol {
-  list-style-type: decimal; /* Handles numbered lists */
-  margin-left: 20px;
-  padding-left: 0.5em; /* Adds some indentation */
-}
-
-.markdown-body ul {
-  list-style-type: disc; /* Handles bullet points */
-  margin-left: 20px;
-  padding-left: 0.5em; /* Adds some indentation */
-}
-
 .markdown-body th {
   text-align: left;
 }