From 6d9ab505529c5cd0f85971b23a8aec9f8e1bd9c6 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 12 Jun 2025 10:44:01 -0500
Subject: [PATCH 1/2] fix: prevent wide markdown table overflow in chat
 interface

Wraps tables in a scrollable container with proper width constraints
to prevent them from expanding beyond chat boundaries
---
 frontend/src/components/markdown.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 67058d6b..74bcd525 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -235,6 +235,20 @@ function CustomCode(props: JSX.IntrinsicElements["code"]) {
   return <code>{props.children}</code>;
 }
 
+function ResponsiveTable({ children, className, ...rest }: JSX.IntrinsicElements["table"]) {
+  // Strip off props added by react-markdown that the DOM doesn't understand
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { node, inline, ...safeRest } = rest as Record<string, unknown>;
+
+  return (
+    <div className="overflow-x-auto max-w-full w-0 min-w-full">
+      <table className={className} {...(safeRest as object)}>
+        {children}
+      </table>
+    </div>
+  );
+}
+
 function escapeDollarNumber(text: string) {
   let escapedText = "";
 
@@ -305,6 +319,7 @@ function MarkDownContentToMemo(props: { content: string }) {
       components={{
         pre: (props: JSX.IntrinsicElements["pre"]) => <PreCode {...props} />,
         code: (props: JSX.IntrinsicElements["code"]) => <CustomCode {...props} />,
+        table: (props: JSX.IntrinsicElements["table"]) => <ResponsiveTable {...props} />,
         p: (pProps) => <p {...pProps} dir="auto" />,
         a: (aProps) => {
           const href = aProps.href || "";

From 15b97aef729be20e071c7df362ff2b540e9a07be Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 12 Jun 2025 11:04:48 -0500
Subject: [PATCH 2/2] Add subtle border around table

---
 frontend/src/components/markdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 74bcd525..a697d2ae 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -241,7 +241,7 @@ function ResponsiveTable({ children, className, ...rest }: JSX.IntrinsicElements
   const { node, inline, ...safeRest } = rest as Record<string, unknown>;
 
   return (
-    <div className="overflow-x-auto max-w-full w-0 min-w-full">
+    <div className="overflow-x-auto max-w-full w-0 min-w-full rounded-md border border-border/50">
       <table className={className} {...(safeRest as object)}>
         {children}
       </table>