From 39cec36641fbc5f24a488348e3573c78f052d731 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 19 Nov 2024 18:28:39 -0300
Subject: [PATCH] fix: fix overflow for lists in markdown render (#4720)

* feat: Add support for ordered and unordered lists in ContentDisplay and ChatMessage components to prevent overflow
---
 .../components/chatComponents/ContentDisplay.tsx   |  6 ++++++
 .../chatView/chatMessage/newChatMessage.tsx        | 14 ++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/frontend/src/components/chatComponents/ContentDisplay.tsx b/src/frontend/src/components/chatComponents/ContentDisplay.tsx
index fbce64044..0870ae453 100644
--- a/src/frontend/src/components/chatComponents/ContentDisplay.tsx
+++ b/src/frontend/src/components/chatComponents/ContentDisplay.tsx
@@ -155,6 +155,12 @@ export default function ContentDisplay({
                 pre({ node, ...props }) {
                   return <>{props.children}</>;
                 },
+                ol({ node, ...props }) {
+                  return <ol className="max-w-full">{props.children}</ol>;
+                },
+                ul({ node, ...props }) {
+                  return <ul className="max-w-full">{props.children}</ul>;
+                },
                 code: ({ node, inline, className, children, ...props }) => {
                   const match = /language-(\w+)/.exec(className || "");
                   return !inline ? (
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
index 5d7e4e2f1..07cd37f9a 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
@@ -552,6 +552,20 @@ export default function ChatMessage({
                                           </span>
                                         );
                                       },
+                                      ol({ node, ...props }) {
+                                        return (
+                                          <ol className="max-w-full">
+                                            {props.children}
+                                          </ol>
+                                        );
+                                      },
+                                      ul({ node, ...props }) {
+                                        return (
+                                          <ul className="max-w-full">
+                                            {props.children}
+                                          </ul>
+                                        );
+                                      },
                                       pre({ node, ...props }) {
                                         return <>{props.children}</>;
                                       },