From 9b856107b03fffc9c0bb30ff6b80ceed7e7411f8 Mon Sep 17 00:00:00 2001
From: francy51 <francesco12382@gmail.com>
Date: Wed, 8 Apr 2026 19:07:44 -0400
Subject: [PATCH] fix(ui): Fix terminal response area clipping on right side

- Add overflow-x-hidden to prevent horizontal scrolling at container level
- Add break-words to content container for proper word breaking
- Add break-words to plain text and markdown rendering
- Add break-all to links and inline code for long content
- Ensure all content stays within viewport width

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/Terminal/TerminalOutput.tsx   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/MosaicIQ/src/components/Terminal/TerminalOutput.tsx b/MosaicIQ/src/components/Terminal/TerminalOutput.tsx
index 5954733..3ae5df1 100644
--- a/MosaicIQ/src/components/Terminal/TerminalOutput.tsx
+++ b/MosaicIQ/src/components/Terminal/TerminalOutput.tsx
@@ -97,16 +97,16 @@ export const TerminalOutput: React.FC<TerminalOutputProps> = ({
   const renderPlainText = (content: string) => {
     const lines = content.split('\n');
     return (
-      <div className="whitespace-pre-wrap font-mono text-[14px] leading-relaxed">
+      <div className="whitespace-pre-wrap break-words font-mono text-[14px] leading-relaxed">
         {lines.map((line, i) => (
-          <div key={i}>{line || '\u00A0'}</div>
+          <div key={i} className="break-words">{line || '\u00A0'}</div>
         ))}
       </div>
     );
   };
 
   const renderMarkdown = (content: string) => (
-    <div className="text-[14px] leading-7 text-[#d6e9ff] [&_strong]:font-semibold [&_strong]:text-white">
+    <div className="text-[14px] leading-7 text-[#d6e9ff] break-words [&_strong]:font-semibold [&_strong]:text-white">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -139,7 +139,7 @@ export const TerminalOutput: React.FC<TerminalOutputProps> = ({
               href={href}
               target="_blank"
               rel="noreferrer"
-              className="text-[#7fc0ff] underline decoration-[#58a6ff]/50 underline-offset-4 transition-colors hover:text-[#b7ddff]"
+              className="text-[#7fc0ff] underline decoration-[#58a6ff]/50 underline-offset-4 transition-colors hover:text-[#b7ddff] break-all"
             >
               {children}
             </a>
@@ -162,11 +162,11 @@ export const TerminalOutput: React.FC<TerminalOutputProps> = ({
             const isBlock = Boolean(className?.includes('language-')) || value.includes('\n');
 
             return isBlock ? (
-              <code className="block overflow-x-auto rounded-xl border border-[#1d2a3a] bg-[#09111c] px-4 py-3 font-mono text-[13px] leading-6 text-[#d8ecff]">
+              <code className="block overflow-x-auto rounded-xl border border-[#1d2a3a] bg-[#09111c] px-4 py-3 font-mono text-[13px] leading-6 text-[#d8ecff] break-all">
                 {value}
               </code>
             ) : (
-              <code className="rounded bg-[#111827] px-1.5 py-0.5 font-mono text-[0.92em] text-[#ffd580]">
+              <code className="rounded bg-[#111827] px-1.5 py-0.5 font-mono text-[0.92em] text-[#ffd580] break-all">
                 {value}
               </code>
             );
@@ -284,13 +284,13 @@ export const TerminalOutput: React.FC<TerminalOutputProps> = ({
   return (
     <div
       ref={outputRef}
-      className="flex-1 overflow-y-auto px-6 py-4 min-h-0"
+      className="flex-1 overflow-y-auto overflow-x-hidden px-6 py-4 min-h-0"
       style={{
         scrollbarWidth: 'thin',
         scrollbarColor: '#2a2a2a #111111'
       }}
     >
-      <div ref={contentRef}>
+      <div ref={contentRef} className="break-words">
         {history.map((entry) => (
           <div
             key={entry.id}