From 9e0bd69166943f11fb20aa71f813b9b69edf694e Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 2 May 2025 14:36:37 +0200
Subject: [PATCH] ui: ensure md table has max sizes to prevent overflow

---
 .../app/components/Kai/components/ChatMsg.tsx |  4 +-
 frontend/app/styles/main.css                  | 56 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/Kai/components/ChatMsg.tsx b/frontend/app/components/Kai/components/ChatMsg.tsx
index db8cd082f..1921a0b80 100644
--- a/frontend/app/components/Kai/components/ChatMsg.tsx
+++ b/frontend/app/components/Kai/components/ChatMsg.tsx
@@ -50,7 +50,9 @@ export function ChatMsg({
         </div>
       )}
       <div className={'mt-1'}>
-        <Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
+        <div className='markdown-body'>
+          <Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
+        </div>
         {isUser ? (
           isLast ? (
             <div
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 1c685f57b..ecdbca0cb 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -287,3 +287,59 @@ svg {
 .text-black {
     color: $black;
 }
+
+.markdown-body table {
+    table-layout: auto;
+    width: 100%;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 3px 6px;
+  border: 1px solid $gray-light;
+}
+
+.markdown-body table td>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body table thead {
+  background-color: rgba(235, 235, 255, 1);
+}
+
+.markdown-body table tbody tr {
+  background-color: rgba(250, 250, 255, 1);
+}
+
+.markdown-body table tbody td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 30px;
+    max-width: 300px;
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: rgba(235, 235, 255, 1);
+}
+
+.markdown-body table img {
+  background-color: transparent;
+}