Skip to content

Commit 6dcd5c4

Browse files
emir-karabegemir-karabeg
committed
fix: text wrapping in console content
1 parent d87edd3 commit 6dcd5c4

File tree

3 files changed

+34
-26
lines changed

3 files changed

+34
-26
lines changed

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
329329
<div className='flex flex-1 flex-col overflow-hidden'>
330330
{/* Chat messages section - Scrollable area */}
331331
<div className='flex-1 overflow-hidden'>
332-
<ScrollArea className='h-full' hideScrollbar={true}>
332+
<ScrollArea className='h-full pb-2' hideScrollbar={true}>
333333
<div>
334334
{workflowMessages.length === 0 ? (
335335
<div className='flex h-32 items-center justify-center text-muted-foreground text-sm'>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/console/components/console-entry/console-entry.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
8383
</div>
8484

8585
{/* Response area */}
86-
<div className='space-y-2'>
86+
<div className='space-y-2 pb-2'>
8787
{/* Error display */}
8888
{entry.error && (
8989
<div className='rounded-lg bg-[#F6D2D2] p-3 dark:bg-[#442929]'>
90-
<div className='whitespace-pre-wrap font-normal text-[#DC2626] text-sm leading-normal dark:text-[#F87171]'>
90+
<div className='overflow-hidden whitespace-pre-wrap break-all font-normal text-[#DC2626] text-sm leading-normal dark:text-[#F87171]'>
9191
{entry.error}
9292
</div>
9393
</div>
@@ -99,7 +99,7 @@ export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
9999
<div className='mb-1 font-normal text-sm text-yellow-800 leading-normal dark:text-yellow-200'>
100100
Warning
101101
</div>
102-
<div className='whitespace-pre-wrap font-normal text-sm text-yellow-700 leading-normal dark:text-yellow-300'>
102+
<div className='overflow-hidden whitespace-pre-wrap break-all font-normal text-sm text-yellow-700 leading-normal dark:text-yellow-300'>
103103
{entry.warning}
104104
</div>
105105
</div>
@@ -133,7 +133,7 @@ export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
133133
<ChevronUp className='h-3 w-3 text-muted-foreground' />
134134
</Button>
135135
</div>
136-
<div className='overflow-hidden pr-16 font-mono font-normal text-muted-foreground text-sm leading-normal'>
136+
<div className='max-w-full overflow-hidden break-all font-mono font-normal text-muted-foreground text-sm leading-normal'>
137137
<JSONView data={entry.output} />
138138
</div>
139139
</div>
@@ -162,7 +162,7 @@ export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
162162
</Button>
163163
</div>
164164
<div
165-
className='cursor-pointer pr-16 font-mono font-normal text-muted-foreground text-sm leading-normal'
165+
className='max-w-full cursor-pointer overflow-hidden break-all font-mono font-normal text-muted-foreground text-sm leading-normal'
166166
onClick={() => setIsExpanded(true)}
167167
>
168168
{'{...}'}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/console/components/json-view/json-view.tsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ const TruncatedValue = ({ value }: { value: string }) => {
1515
const [isExpanded, setIsExpanded] = useState(false)
1616

1717
if (value.length <= MAX_STRING_LENGTH) {
18-
return <span className='font-[380] text-muted-foreground/80 leading-normal'>{value}</span>
18+
return (
19+
<span className='break-all font-[380] text-muted-foreground/80 leading-normal'>{value}</span>
20+
)
1921
}
2022

2123
return (
22-
<span className='font-[380] text-muted-foreground/80 leading-normal'>
24+
<span className='break-all font-[380] text-muted-foreground/80 leading-normal'>
2325
{isExpanded ? value : `${value.slice(0, MAX_STRING_LENGTH)}...`}
2426
<Button
2527
variant='link'
@@ -40,11 +42,13 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
4042
const [isExpanded, setIsExpanded] = useState(false)
4143

4244
if (data === null) {
43-
return <span className='font-[380] text-muted-foreground leading-normal'>null</span>
45+
return <span className='break-all font-[380] text-muted-foreground leading-normal'>null</span>
4446
}
4547

4648
if (data === undefined) {
47-
return <span className='font-[380] text-muted-foreground leading-normal'>undefined</span>
49+
return (
50+
<span className='break-all font-[380] text-muted-foreground leading-normal'>undefined</span>
51+
)
4852
}
4953

5054
if (typeof data === 'string') {
@@ -53,7 +57,7 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
5357

5458
if (typeof data === 'number' || typeof data === 'boolean') {
5559
return (
56-
<span className='font-[380] text-muted-foreground/80 leading-normal'>
60+
<span className='break-all font-[380] text-muted-foreground/80 leading-normal'>
5761
{JSON.stringify(data)}
5862
</span>
5963
)
@@ -65,7 +69,7 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
6569
if (shouldCollapse && !isExpanded) {
6670
return (
6771
<span
68-
className='cursor-pointer font-[380] text-muted-foreground text-xs leading-normal'
72+
className='cursor-pointer break-all font-[380] text-muted-foreground text-xs leading-normal'
6973
onClick={() => setIsExpanded(true)}
7074
>
7175
{'[...]'}
@@ -74,13 +78,13 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
7478
}
7579

7680
return (
77-
<span className='font-[380] text-muted-foreground leading-normal'>
81+
<span className='break-all font-[380] text-muted-foreground leading-normal'>
7882
{'['}
7983
{data.length > 0 && (
8084
<>
8185
{'\n'}
8286
{data.map((item, index) => (
83-
<span key={index}>
87+
<span key={index} className='break-all'>
8488
{' '.repeat(depth + 1)}
8589
<CollapsibleJSON data={item} depth={depth + 1} />
8690
{index < data.length - 1 ? ',' : ''}
@@ -102,7 +106,7 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
102106
if (shouldCollapse && !isExpanded) {
103107
return (
104108
<span
105-
className='cursor-pointer font-[380] text-muted-foreground text-xs leading-normal'
109+
className='cursor-pointer break-all font-[380] text-muted-foreground text-xs leading-normal'
106110
onClick={() => setIsExpanded(true)}
107111
>
108112
{'{...}'}
@@ -111,15 +115,15 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
111115
}
112116

113117
return (
114-
<span className='font-[380] text-muted-foreground leading-normal'>
118+
<span className='break-all font-[380] text-muted-foreground leading-normal'>
115119
{'{'}
116120
{keys.length > 0 && (
117121
<>
118122
{'\n'}
119123
{keys.map((key, index) => (
120-
<span key={key}>
124+
<span key={key} className='break-all'>
121125
{' '.repeat(depth + 1)}
122-
<span className='font-[380] text-foreground leading-normal'>"{key}"</span>
126+
<span className='break-all font-[380] text-foreground leading-normal'>"{key}"</span>
123127
<span className='font-[380] text-muted-foreground leading-normal'>: </span>
124128
<CollapsibleJSON data={data[key]} depth={depth + 1} />
125129
{index < keys.length - 1 ? ',' : ''}
@@ -135,7 +139,9 @@ const CollapsibleJSON = ({ data, depth = 0 }: { data: any; depth?: number }) =>
135139
}
136140

137141
return (
138-
<span className='font-[380] text-muted-foreground leading-normal'>{JSON.stringify(data)}</span>
142+
<span className='break-all font-[380] text-muted-foreground leading-normal'>
143+
{JSON.stringify(data)}
144+
</span>
139145
)
140146
}
141147

@@ -413,7 +419,7 @@ export const JSONView = ({ data }: JSONViewProps) => {
413419
return (
414420
<div onContextMenu={handleContextMenu}>
415421
<ImagePreview imageUrl={data.url} />
416-
<pre className='whitespace-pre-wrap font-mono'>
422+
<pre className='max-w-full overflow-hidden whitespace-pre-wrap break-all font-mono'>
417423
<CollapsibleJSON data={data} />
418424
</pre>
419425
{contextMenuPosition && (
@@ -449,7 +455,7 @@ export const JSONView = ({ data }: JSONViewProps) => {
449455
return (
450456
<div onContextMenu={handleContextMenu}>
451457
<AudioPlayer audioUrl={data.audioUrl} />
452-
<pre className='whitespace-pre-wrap font-mono'>
458+
<pre className='max-w-full overflow-hidden whitespace-pre-wrap break-all font-mono'>
453459
<CollapsibleJSON data={data} />
454460
</pre>
455461
{contextMenuPosition && (
@@ -481,7 +487,7 @@ export const JSONView = ({ data }: JSONViewProps) => {
481487
imageData={hasValidImage && isBase64Image(data.image) ? data.image : undefined}
482488
isBase64={hasValidImage && isBase64Image(data.image)}
483489
/>
484-
<pre className='whitespace-pre-wrap font-mono'>
490+
<pre className='max-w-full overflow-hidden whitespace-pre-wrap break-all font-mono'>
485491
<CollapsibleJSON data={data} />
486492
</pre>
487493
{contextMenuPosition && (
@@ -529,7 +535,7 @@ export const JSONView = ({ data }: JSONViewProps) => {
529535
}
530536
isBase64={hasValidImage && isBase64Image(outputData.image)}
531537
/>
532-
<pre className='whitespace-pre-wrap font-mono'>
538+
<pre className='max-w-full overflow-hidden whitespace-pre-wrap break-all font-mono'>
533539
<CollapsibleJSON data={data} />
534540
</pre>
535541
{contextMenuPosition && (
@@ -566,12 +572,14 @@ export const JSONView = ({ data }: JSONViewProps) => {
566572
return (
567573
<span
568574
onContextMenu={handleContextMenu}
569-
className='relative break-all font-[380] font-mono text-muted-foreground leading-normal'
575+
className='relative max-w-full overflow-hidden break-all font-[380] font-mono text-muted-foreground leading-normal'
570576
>
571577
{typeof data === 'string' ? (
572578
<TruncatedValue value={stringValue} />
573579
) : (
574-
<span className='font-[380] text-muted-foreground leading-normal'>{stringValue}</span>
580+
<span className='break-all font-[380] text-muted-foreground leading-normal'>
581+
{stringValue}
582+
</span>
575583
)}
576584
{contextMenuPosition && (
577585
<div
@@ -593,7 +601,7 @@ export const JSONView = ({ data }: JSONViewProps) => {
593601
// Default case: show JSON as formatted text with collapsible functionality
594602
return (
595603
<div onContextMenu={handleContextMenu}>
596-
<pre className='whitespace-pre-wrap font-mono'>
604+
<pre className='max-w-full overflow-hidden whitespace-pre-wrap break-all font-mono'>
597605
<CollapsibleJSON data={data} />
598606
</pre>
599607
{contextMenuPosition && (

0 commit comments

Comments
 (0)