From 8c64c7714d05bf9055d775193a43146ec000f80c Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 18 Sep 2025 11:55:23 -0500
Subject: [PATCH] Fix markdown table rendering on mobile and desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tables were overflowing message boundaries and getting squished on mobile.
This fix ensures tables stay within container bounds with proper scrolling.

Changes:
- Add overflow constraints to message containers to prevent content breakout
- Update ResponsiveTable to maintain natural column widths with horizontal scroll
- Add white-space: nowrap to table cells to prevent text wrapping
- Add overflow-x-hidden to chat container to prevent horizontal page scroll

Tables now behave consistently with code blocks - contained within message
boundaries with horizontal scrolling when content is wider than container.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/chat.css                      |  1 +
 frontend/src/components/markdown.tsx       | 14 ++++++++++----
 frontend/src/routes/_auth.chat.$chatId.tsx |  8 +++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/chat.css b/frontend/src/chat.css
index 70666447..253a43d5 100644
--- a/frontend/src/chat.css
+++ b/frontend/src/chat.css
@@ -609,6 +609,7 @@
 .markdown-body table td {
   padding: 6px 13px;
   border: 1px solid var(--color-border-default);
+  white-space: nowrap;
 }
 
 .markdown-body table tr {
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 43813071..fb5f8578 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -269,10 +269,16 @@ 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 rounded-md border border-border/50">
-      <table className={className} {...(safeRest as object)}>
-        {children}
-      </table>
+    <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">
+        <table
+          className={className || ""}
+          style={{ width: "max-content" }}
+          {...(safeRest as object)}
+        >
+          {children}
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 6afb14f9..d5baf8cf 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -102,7 +102,9 @@ function UserMessage({ message, chatId }: { message: ChatMessage; chatId: string
         <div>
           <UserIcon />
         </div>
-        <div className="flex flex-col gap-2">{renderContent(message.content, chatId)}</div>
+        <div className="flex flex-col gap-2 min-w-0 flex-1 overflow-hidden">
+          {renderContent(message.content, chatId)}
+        </div>
       </div>
     </div>
   );
@@ -295,7 +297,7 @@ function SystemMessage({
         <div>
           <AsteriskIcon />
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 min-w-0 flex-1 overflow-hidden">
           <Markdown content={text} loading={loading} chatId={chatId} />
           <div className="flex gap-2 items-center">
             <Button
@@ -790,7 +792,7 @@ END OF INSTRUCTIONS`;
         )}
         <div
           ref={chatContainerRef}
-          className="flex-1 min-h-0 overflow-y-auto flex flex-col relative"
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden flex flex-col relative"
         >
           <div className="mt-4 md:mt-8 w-full h-10 flex items-center justify-center relative">
             {/* Mobile new chat button */}