Francy51/MosaicIQ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Fix terminal response area clipping on right side

Browse Source 
- 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>
This commit is contained in:
francy51
2026-04-08 19:07:44 -04:00
parent e8a5ace693
commit 9b856107b0
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
MosaicIQ/src/components/Terminal/TerminalOutput.tsx
View File

@@ -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}