Skip to content

Commit 36e1de3

Browse files
kyle-computekyle-compute
committed
fix(frontend): contain workflow config previews
1 parent 86f1275 commit 36e1de3

3 files changed

Lines changed: 34 additions & 32 deletions

File tree

‎frontend/src/components/artifacts-viewer.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -415,26 +415,28 @@ export function ArtifactsViewer({
415415
}`;
416416

417417
return (
418-
<div className="flex h-full flex-col overflow-hidden md:flex-row">
419-
<div className="border-border bg-muted/30 max-h-[30vh] w-full overflow-auto border-b md:max-h-none md:w-56 md:border-r md:border-b-0 lg:w-64">
420-
<div className="p-2">
421-
<div className="text-muted-foreground flex items-center justify-between gap-2 px-2 py-2 font-mono text-[10px] font-semibold tracking-wide uppercase sm:text-xs">
422-
<span>Artifacts</span>
423-
<span className="text-muted-foreground/70 font-sans text-[10px] font-normal normal-case">
424-
{fileCountLabel}
425-
</span>
418+
<div className="@container/file-browser flex h-full min-h-0 min-w-0 overflow-hidden">
419+
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden @2xl/file-browser:flex-row">
420+
<div className="border-border bg-muted/30 max-h-[30vh] w-full overflow-auto border-b @2xl/file-browser:max-h-none @2xl/file-browser:w-56 @2xl/file-browser:shrink-0 @2xl/file-browser:border-r @2xl/file-browser:border-b-0 @3xl/file-browser:w-64">
421+
<div className="p-2">
422+
<div className="text-muted-foreground flex items-center justify-between gap-2 px-2 py-2 font-mono text-[10px] font-semibold tracking-wide uppercase sm:text-xs">
423+
<span>Artifacts</span>
424+
<span className="text-muted-foreground/70 font-sans text-[10px] font-normal normal-case">
425+
{fileCountLabel}
426+
</span>
427+
</div>
428+
{renderTree(tree)}
426429
</div>
427-
{renderTree(tree)}
428430
</div>
431+
<ArtifactContentPane
432+
filesUrl={filesUrl}
433+
selectedFile={selectedFile}
434+
viewMode={viewMode}
435+
onViewModeChange={setViewMode}
436+
selectedLines={selectedLines}
437+
onSelectLinesChange={onSelectLinesChange}
438+
/>
429439
</div>
430-
<ArtifactContentPane
431-
filesUrl={filesUrl}
432-
selectedFile={selectedFile}
433-
viewMode={viewMode}
434-
onViewModeChange={setViewMode}
435-
selectedLines={selectedLines}
436-
onSelectLinesChange={onSelectLinesChange}
437-
/>
438440
</div>
439441
);
440442
}
@@ -600,7 +602,7 @@ function ArtifactContentPane({
600602
const renderUrl = presignedUrl || proxyUrl || null;
601603

602604
return (
603-
<div className="flex flex-1 flex-col overflow-hidden">
605+
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
604606
<div className="border-border bg-muted/30 flex items-center justify-between gap-2 border-b px-3 py-2 sm:px-4">
605607
<div className="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[10px] sm:text-xs">
606608
{selectedFile.path}

‎frontend/src/components/renderers/config-json-renderer.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function ConfigJsonRenderer({ content }: { content: string }) {
4545
}
4646

4747
return (
48-
<div className="space-y-3 p-3 text-sm">
48+
<div className="min-w-0 space-y-3 p-3 text-sm">
4949
<div className="flex items-start justify-between gap-4">
5050
<div>
5151
<h2 className="text-base font-semibold text-foreground">
@@ -107,7 +107,9 @@ export function ConfigJsonRenderer({ content }: { content: string }) {
107107
</Card>
108108
)}
109109

110-
{(data.trial_name || data.trials_dir || data.timeout_multiplier) && (
110+
{(data.trial_name ||
111+
data.trials_dir ||
112+
data.timeout_multiplier !== undefined) && (
111113
<Card className="border-border/50 bg-card/50">
112114
<CardHeader>
113115
<CardTitle className="text-sm">Trial Information</CardTitle>
@@ -175,7 +177,7 @@ export function ConfigJsonRenderer({ content }: { content: string }) {
175177
)}
176178
{data.agent.kwargs && Object.keys(data.agent.kwargs).length > 0 && (
177179
<Row label="Arguments">
178-
<pre className="rounded bg-muted/50 p-2 font-mono text-xs text-foreground">
180+
<pre className="min-w-0 max-w-full wrap-break-word whitespace-pre-wrap rounded bg-muted/50 p-2 font-mono text-xs text-foreground">
179181
{JSON.stringify(data.agent.kwargs, null, 2)}
180182
</pre>
181183
</Row>
@@ -222,7 +224,7 @@ export function ConfigJsonRenderer({ content }: { content: string }) {
222224
{data.environment.kwargs &&
223225
Object.keys(data.environment.kwargs).length > 0 && (
224226
<Row label="Arguments">
225-
<pre className="rounded bg-muted/50 p-2 font-mono text-xs text-foreground">
227+
<pre className="min-w-0 max-w-full wrap-break-word whitespace-pre-wrap rounded bg-muted/50 p-2 font-mono text-xs text-foreground">
226228
{JSON.stringify(data.environment.kwargs, null, 2)}
227229
</pre>
228230
</Row>
@@ -260,11 +262,9 @@ function Row({
260262
children: React.ReactNode;
261263
}) {
262264
return (
263-
<div className="flex items-start gap-2">
264-
<span className="min-w-[110px] text-xs text-muted-foreground">
265-
{label}:
266-
</span>
267-
{children}
265+
<div className="grid min-w-0 grid-cols-[7rem_minmax(0,1fr)] items-start gap-2">
266+
<span className="text-xs text-muted-foreground">{label}:</span>
267+
<div className="min-w-0 wrap-break-word">{children}</div>
268268
</div>
269269
);
270270
}

‎frontend/src/components/task-files-panel.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1449,7 +1449,7 @@ export function TaskFilesPanel({
14491449
);
14501450

14511451
const fileTreeContent = (
1452-
<>
1452+
<div className="@container/file-browser flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
14531453
{isListingLoading ? (
14541454
listingSkeleton
14551455
) : listingError && !taskPaneExists ? (
@@ -1474,8 +1474,8 @@ export function TaskFilesPanel({
14741474
</div>
14751475
</div>
14761476
) : (
1477-
<div className="flex flex-1 flex-col overflow-hidden md:flex-row">
1478-
<div className="border-border bg-muted/30 max-h-[30vh] w-full overflow-auto border-b md:max-h-none md:w-56 md:border-r md:border-b-0 lg:w-64">
1477+
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden @2xl/file-browser:flex-row">
1478+
<div className="border-border bg-muted/30 max-h-[30vh] w-full overflow-auto border-b @2xl/file-browser:max-h-none @2xl/file-browser:w-56 @2xl/file-browser:shrink-0 @2xl/file-browser:border-r @2xl/file-browser:border-b-0 @3xl/file-browser:w-64">
14791479
<div className="p-2">
14801480
{taskPaneExists && (
14811481
<div className="border-border mb-2 border-b pb-2">
@@ -1548,7 +1548,7 @@ export function TaskFilesPanel({
15481548
)}
15491549
</div>
15501550
</div>
1551-
<div className="flex flex-1 flex-col overflow-hidden">
1551+
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
15521552
{activePane === "file" && selectedFile && (
15531553
<div className="border-border bg-muted/30 flex items-center justify-between gap-2 border-b px-3 py-2 sm:px-4">
15541554
<div className="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[10px] sm:text-xs">
@@ -1655,7 +1655,7 @@ export function TaskFilesPanel({
16551655
</div>
16561656
</div>
16571657
)}
1658-
</>
1658+
</div>
16591659
);
16601660

16611661
const content = (

0 commit comments

Comments
 (0)