From 9b3f89567a04e4ffe05894eddc997eee19f710f8 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Fri, 13 Jun 2025 13:40:51 +0000
Subject: [PATCH 1/4] fix: add overflow handling to prompt text areas to
 prevent content from overflowing container backgrounds

- Applied overflow-x-auto max-w-full min-w-0 classes to main textarea
- Applied overflow-x-auto max-w-full min-w-0 classes to system prompt textarea
- Added min-w-0 to main flex container to ensure overflow works in flex layouts
- Follows same pattern used for table overflow fix

Fixes #120

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/ChatBox.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index d33872458..f28b72158 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -313,7 +313,7 @@ export default function Component({
   })();
 
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full min-w-0">
       <TokenWarning
         messages={messages}
         currentInput={inputValue}
@@ -347,7 +347,7 @@ export default function Component({
               onChange={(e) => setSystemPromptValue(e.target.value)}
               placeholder="Enter instructions for the AI (e.g., 'You are a helpful coding assistant...')"
               rows={2}
-              className="w-full p-2 text-sm border border-muted-foreground/20 rounded-md bg-muted/50 placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring resize-none transition-colors"
+              className="w-full p-2 text-sm border border-muted-foreground/20 rounded-md bg-muted/50 placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring resize-none transition-colors overflow-x-auto max-w-full min-w-0"
               style={{
                 height: "auto",
                 resize: "none",
@@ -402,6 +402,7 @@ export default function Component({
             "placeholder:text-muted-foreground focus-visible:outline-none",
             "disabled:cursor-not-allowed disabled:opacity-50",
             "!border-0 shadow-none !border-none focus-visible:ring-0 !ring-0",
+            "overflow-x-auto max-w-full min-w-0",
             billingStatus === null && "animate-pulse"
           )}
           value={inputValue}

From f4aa834c0580569f7d6d9adb7260f927158b6c79 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Fri, 13 Jun 2025 14:10:37 +0000
Subject: [PATCH 2/4] fix: apply overflow handling to markdown code blocks
 instead of prompt inputs

Corrected the implementation based on user feedback:
- Reverted incorrect overflow fixes from ChatBox input textareas
- Applied overflow wrapper to PreCode component in markdown.tsx
- Uses same pattern as table overflow fix: overflow-x-auto max-w-full w-0 min-w-full
- Prevents code blocks from overflowing chat message containers

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/ChatBox.tsx  | 5 ++---
 frontend/src/components/markdown.tsx | 4 +++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index f28b72158..d33872458 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -313,7 +313,7 @@ export default function Component({
   })();
 
   return (
-    <div className="flex flex-col w-full min-w-0">
+    <div className="flex flex-col w-full">
       <TokenWarning
         messages={messages}
         currentInput={inputValue}
@@ -347,7 +347,7 @@ export default function Component({
               onChange={(e) => setSystemPromptValue(e.target.value)}
               placeholder="Enter instructions for the AI (e.g., 'You are a helpful coding assistant...')"
               rows={2}
-              className="w-full p-2 text-sm border border-muted-foreground/20 rounded-md bg-muted/50 placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring resize-none transition-colors overflow-x-auto max-w-full min-w-0"
+              className="w-full p-2 text-sm border border-muted-foreground/20 rounded-md bg-muted/50 placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring resize-none transition-colors"
               style={{
                 height: "auto",
                 resize: "none",
@@ -402,7 +402,6 @@ export default function Component({
             "placeholder:text-muted-foreground focus-visible:outline-none",
             "disabled:cursor-not-allowed disabled:opacity-50",
             "!border-0 shadow-none !border-none focus-visible:ring-0 !ring-0",
-            "overflow-x-auto max-w-full min-w-0",
             billingStatus === null && "animate-pulse"
           )}
           value={inputValue}
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 99ed5c93b..11c202b04 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -238,7 +238,9 @@ export function PreCode(props: JSX.IntrinsicElements["pre"]) {
           )}
         </Button>
       </div>
-      <pre ref={ref}>{props.children}</pre>
+      <div className="overflow-x-auto max-w-full w-0 min-w-full">
+        <pre ref={ref}>{props.children}</pre>
+      </div>
     </>
   );
 }

From abb0f6aec32f29b76c28aa3ba24a868097a39866 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:54:01 +0000
Subject: [PATCH 3/4] fix: apply overflow handling to markdown code blocks
 instead of prompt inputs

Replace ineffective overflow-x-auto scrolling approach with proper CSS word-breaking
that handles long unbreakable strings like file paths. This prevents text from
overflowing container backgrounds by breaking long words when necessary while
preserving normal word boundaries.

- Remove overflow-x-auto wrapper div from PreCode component
- Apply overflowWrap: 'break-word' and wordBreak: 'break-word' to <pre> elements
- Ensures long file paths and URLs break appropriately instead of creating horizontal scroll

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

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 11c202b04..1c31c8ac4 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -238,9 +238,9 @@ export function PreCode(props: JSX.IntrinsicElements["pre"]) {
           )}
         </Button>
       </div>
-      <div className="overflow-x-auto max-w-full w-0 min-w-full">
-        <pre ref={ref}>{props.children}</pre>
-      </div>
+      <pre ref={ref} style={{ overflowWrap: "break-word", wordBreak: "break-word" }}>
+        {props.children}
+      </pre>
     </>
   );
 }

From 6b0f5dd6d6fa82d47f6b0377a84115501bb94f4c Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Fri, 13 Jun 2025 18:20:46 +0000
Subject: [PATCH 4/4] fix: apply word-breaking CSS to markdown container for
 long text overflow

Fixes text overflow issue by applying overflowWrap and wordBreak CSS
to the main markdown-body container, ensuring long unbreakable strings
like file paths break properly instead of overflowing container backgrounds.

Previous attempts only targeted code blocks, but the overflow was occurring
in regular paragraph text within the markdown content.

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

diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 1c31c8ac4..f8d3c3af4 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -406,7 +406,9 @@ export function Markdown(
       className="markdown-body"
       style={{
         fontSize: `${props.fontSize ?? 16}px`,
-        fontFamily: props.fontFamily || "inherit"
+        fontFamily: props.fontFamily || "inherit",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
       }}
       ref={mdRef}
       onContextMenu={props.onContextMenu}