From b7c0223df7fa329075c1a7ec796243c5a32c73e3 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 19:55:31 +0000
Subject: [PATCH 1/5] fix: add responsive table wrapper to prevent overflow in
 chat interface

Add ResponsiveTable component that wraps markdown tables in a scrollable container to prevent wide tables from expanding beyond chat boundaries. Uses Tailwind CSS overflow-x-auto and max-w-full classes to enable horizontal scrolling when needed.

Fixes #114

Co-authored-by: marksftw <marksftw@users.noreply.github.com>
---
 frontend/src/components/markdown.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 67058d6be..030562080 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -235,6 +235,14 @@ function CustomCode(props: JSX.IntrinsicElements["code"]) {
   return <code>{props.children}</code>;
 }
 
+function ResponsiveTable(props: JSX.IntrinsicElements["table"]) {
+  return (
+    <div className="overflow-x-auto max-w-full">
+      <table {...props}>{props.children}</table>
+    </div>
+  );
+}
+
 function escapeDollarNumber(text: string) {
   let escapedText = "";
 
@@ -305,6 +313,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 5f03b73f2ec1a86debc58f6a0bcfcc3b17258c8b Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 20:07:54 +0000
Subject: [PATCH 2/5] fix: improve responsive table CSS to properly constrain
 width

Replace `max-w-full` with `w-full min-w-0` in ResponsiveTable wrapper
to ensure tables respect parent container width constraints and enable
proper horizontal scrolling when content overflows.

Co-authored-by: marksftw <marksftw@users.noreply.github.com>
---
 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 030562080..17257879e 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -237,7 +237,7 @@ function CustomCode(props: JSX.IntrinsicElements["code"]) {
 
 function ResponsiveTable(props: JSX.IntrinsicElements["table"]) {
   return (
-    <div className="overflow-x-auto max-w-full">
+    <div className="overflow-x-auto w-full min-w-0">
       <table {...props}>{props.children}</table>
     </div>
   );

From 40ad56e204b82dd0a29106c0b38a4c509f5317e6 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 21:01:18 +0000
Subject: [PATCH 3/5] fix: improve table overflow constraints with proper CSS
 styling

- Replace w-full min-w-0 with max-w-full to respect parent container width
- Add table-level CSS: tableLayout auto, width max-content, minWidth 100%
- This forces tables to be constrained within chat interface bounds
- Enables proper horizontal scrolling for wide tables

Co-authored-by: marksftw <marksftw@users.noreply.github.com>
---
 frontend/src/components/markdown.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 17257879e..d89deecd7 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -237,8 +237,13 @@ function CustomCode(props: JSX.IntrinsicElements["code"]) {
 
 function ResponsiveTable(props: JSX.IntrinsicElements["table"]) {
   return (
-    <div className="overflow-x-auto w-full min-w-0">
-      <table {...props}>{props.children}</table>
+    <div className="overflow-x-auto max-w-full">
+      <table
+        {...props}
+        style={{ ...props.style, tableLayout: "auto", width: "max-content", minWidth: "100%" }}
+      >
+        {props.children}
+      </table>
     </div>
   );
 }

From c34e813509c0b5c340f7298e95c7c01db76e8b87 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 21:08:54 +0000
Subject: [PATCH 4/5] fix: improve table overflow solution with proper CSS
 constraints

- Changed wrapper to use explicit width/maxWidth styles instead of Tailwind classes
- Set table to use max-content width with minWidth 100% for proper expansion
- Use boxSizing border-box to ensure proper width calculation
- Override existing CSS cascade that was preventing container constraints

Co-authored-by: marksftw <marksftw@users.noreply.github.com>
---
 frontend/src/components/markdown.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index d89deecd7..7c1930b68 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -237,10 +237,23 @@ function CustomCode(props: JSX.IntrinsicElements["code"]) {
 
 function ResponsiveTable(props: JSX.IntrinsicElements["table"]) {
   return (
-    <div className="overflow-x-auto max-w-full">
+    <div
+      className="overflow-x-auto"
+      style={{
+        width: "100%",
+        maxWidth: "100%",
+        boxSizing: "border-box"
+      }}
+    >
       <table
         {...props}
-        style={{ ...props.style, tableLayout: "auto", width: "max-content", minWidth: "100%" }}
+        style={{
+          ...props.style,
+          display: "table",
+          width: "max-content",
+          minWidth: "100%",
+          maxWidth: "none"
+        }}
       >
         {props.children}
       </table>

From 4d09abd906d21de4a134e3959d402a4455dcdd69 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 21:19:43 +0000
Subject: [PATCH 5/5] fix: correct table overflow constraints by removing
 maxWidth: none

Fixed ResponsiveTable component to properly constrain table width within container bounds:
- Changed table maxWidth from "none" to "100%" to respect container limits
- Simplified container styles to maxWidth: "100%" and width: "100%"
- Tables now trigger horizontal scrolling when content exceeds available width
- Resolves issue where wide tables expanded beyond chat interface boundaries

Co-authored-by: marksftw <marksftw@users.noreply.github.com>
---
 frontend/src/components/markdown.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 7c1930b68..b8064cc2d 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -240,19 +240,17 @@ function ResponsiveTable(props: JSX.IntrinsicElements["table"]) {
     <div
       className="overflow-x-auto"
       style={{
-        width: "100%",
         maxWidth: "100%",
-        boxSizing: "border-box"
+        width: "100%"
       }}
     >
       <table
         {...props}
         style={{
           ...props.style,
-          display: "table",
           width: "max-content",
           minWidth: "100%",
-          maxWidth: "none"
+          maxWidth: "100%"
         }}
       >
         {props.children}