From 1d9ca7b5994420eedbedc45972d2d2377eeebb79 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Fri, 21 Mar 2025 14:18:15 -0300
Subject: [PATCH] fix: added overflow on dataframe output (#7197)

* Increase min table column width

* Add overflow to table on markdown

* Added overflow hidden
---
 .../chatView/chatMessage/components/edit-message.tsx     | 9 +++++++++
 src/frontend/src/style/classes.css                       | 6 +++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
index 5b416bfce..5ed3acc50 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
@@ -55,6 +55,15 @@ export const MarkdownField = ({
           pre({ node, ...props }) {
             return <>{props.children}</>;
           },
+          table: ({ node, ...props }) => {
+            return (
+              <div className="max-w-full overflow-hidden rounded-md border bg-muted">
+                <div className="max-h-[600px] w-full overflow-auto p-4">
+                  <table className="!my-0 w-full">{props.children}</table>
+                </div>
+              </div>
+            );
+          },
           code: ({ node, inline, className, children, ...props }) => {
             let content = children as string;
             if (
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index 864f652d9..0e1cf5995 100644
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@@ -18,8 +18,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 pre {
   font-family: inherit;
@@ -288,7 +288,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .markdown td {
-  min-width: 78px;
+  min-width: 100px;
 }
 
 .jse-group-button.jse-last,