From a63725270dc9ea16adf6ac474d47ef0c4f7961de Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Mon, 8 Dec 2025 13:37:45 -0600
Subject: [PATCH 1/2] fix: improve table column width and mobile scrolling

- Add max-width (300px) and min-width (80px) to table cells
- Enable word-wrap for long content in cells
- Ensure tables scroll horizontally on mobile instead of squishing
- Tables now size to fit content instead of always full width

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 frontend/src/chat.css                | 6 +++++-
 frontend/src/components/markdown.tsx | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/chat.css b/frontend/src/chat.css
index 253a43d58..195a6ae1b 100644
--- a/frontend/src/chat.css
+++ b/frontend/src/chat.css
@@ -609,7 +609,11 @@
 .markdown-body table td {
   padding: 6px 13px;
   border: 1px solid var(--color-border-default);
-  white-space: nowrap;
+  min-width: 80px;
+  max-width: 300px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 
 .markdown-body table tr {
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 8e22c5c6f..745a71f7d 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -270,11 +270,11 @@ function ResponsiveTable({ children, className, ...rest }: JSX.IntrinsicElements
   const { node, inline, ...safeRest } = rest as Record<string, unknown>;
 
   return (
-    <div className="my-4 w-full max-w-full overflow-hidden">
-      <div className="overflow-x-auto overflow-y-hidden rounded-md border border-border/50 shadow-sm">
+    <div className="my-4 -mx-4 px-4 overflow-x-auto">
+      <div className="inline-block rounded-md border border-border/50 shadow-sm">
         <table
           className={className || ""}
-          style={{ width: "max-content" }}
+          style={{ minWidth: "max-content" }}
           {...(safeRest as object)}
         >
           {children}

From 91701172a63f5c4a91b66aa42684f934b30ff682 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Mon, 8 Dec 2025 13:46:41 -0600
Subject: [PATCH 2/2] feat: add scroll indicator shadows to tables

Show subtle gradient shadows on table edges when there's more
content to scroll, helping users discover scrollable content.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 frontend/src/components/markdown.tsx | 50 +++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 745a71f7d..0b26154cc 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -269,16 +269,48 @@ function ResponsiveTable({ children, className, ...rest }: JSX.IntrinsicElements
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { node, inline, ...safeRest } = rest as Record<string, unknown>;
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const checkScroll = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+    };
+
+    checkScroll();
+    el.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+
+    return () => {
+      el.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, []);
+
   return (
-    <div className="my-4 -mx-4 px-4 overflow-x-auto">
-      <div className="inline-block rounded-md border border-border/50 shadow-sm">
-        <table
-          className={className || ""}
-          style={{ minWidth: "max-content" }}
-          {...(safeRest as object)}
-        >
-          {children}
-        </table>
+    <div className="my-4 -mx-4 px-4 relative">
+      {canScrollLeft && (
+        <div className="absolute left-[15px] top-0 bottom-0 w-8 pointer-events-none bg-gradient-to-r from-background to-transparent z-10" />
+      )}
+      {canScrollRight && (
+        <div className="absolute right-[15px] top-0 bottom-0 w-8 pointer-events-none bg-gradient-to-l from-background to-transparent z-10" />
+      )}
+      <div ref={scrollRef} className="overflow-x-auto">
+        <div className="inline-block rounded-md border border-border/50 shadow-sm">
+          <table
+            className={className || ""}
+            style={{ minWidth: "max-content" }}
+            {...(safeRest as object)}
+          >
+            {children}
+          </table>
+        </div>
       </div>
     </div>
   );