From e2bde51c188afad07fe063275cc69f47bb347f3d Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 21:25:14 +0000
Subject: [PATCH 1/2] fix: add general content overflow protection with
 horizontal scrolling

Replaces table-specific solution with universal overflow handling. Added
overflow-x-auto and max-w-full classes to markdown container to prevent
any content (tables, code blocks, long text) from expanding beyond chat
interface boundaries. Provides horizontal scrolling when needed.

Fixes #114

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 67058d6be..a72dc10ec 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -374,7 +374,7 @@ export function Markdown(
 
   return (
     <div
-      className="markdown-body"
+      className="markdown-body overflow-x-auto max-w-full"
       style={{
         fontSize: `${props.fontSize ?? 16}px`,
         fontFamily: props.fontFamily || "inherit"

From 39990a064b02a83c8060bf8a551cc29c9814ea39 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 11 Jun 2025 21:35:20 +0000
Subject: [PATCH 2/2] fix: improve content overflow handling with proper flex
 constraints

- Added min-w-0 to markdown container to allow shrinking in flex layouts
- Added min-w-0 to parent flex containers in UserMessage and SystemMessage
- This ensures overflow-x-auto works properly by preventing flex layout constraints from blocking horizontal scrolling

Fixes the issue where wide content (tables, code blocks) was still overflowing despite the previous overflow-x-auto implementation.

Co-authored-by: marksftw <marksftw@users.noreply.github.com>
---
 frontend/src/components/markdown.tsx       | 2 +-
 frontend/src/routes/_auth.chat.$chatId.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index a72dc10ec..e08ca7fe2 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -374,7 +374,7 @@ export function Markdown(
 
   return (
     <div
-      className="markdown-body overflow-x-auto max-w-full"
+      className="markdown-body overflow-x-auto max-w-full min-w-0"
       style={{
         fontSize: `${props.fontSize ?? 16}px`,
         fontFamily: props.fontFamily || "inherit"
diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 115363fc7..bcdddd11b 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -25,7 +25,7 @@ function UserMessage({ text, chatId }: { text: string; chatId: string }) {
         <div>
           <UserIcon />
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 min-w-0">
           <Markdown content={text} loading={false} chatId={chatId} />
         </div>
       </div>
@@ -60,7 +60,7 @@ function SystemMessage({
         <div>
           <AsteriskIcon />
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 min-w-0">
           <Markdown content={text} loading={loading} chatId={chatId} />
           <Button
             variant="ghost"