From cf15ef5795eec797569e665ef23e1bb50f5a5cbb Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Thu, 8 Jan 2026 06:29:49 +0000
Subject: [PATCH] improve job preview popover layout (#7485)

---
 .../src/lib/components/jobs/JobPreview.svelte | 87 ++++++++++---------
 .../(root)/(logged)/schedules/+page.svelte    |  2 +-
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index 75ff539ddb..972cff6799 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -16,15 +16,18 @@
 	import { forLater } from '$lib/forLater'
 	import DurationMs from '../DurationMs.svelte'
 	import { workspaceStore } from '$lib/stores'
+	import { twMerge } from 'tailwind-merge'
 
 	const POPUP_HEIGHT = 320 as const
 
 	interface Props {
 		id: string
 		children?: import('svelte').Snippet<[any]>
+		class?: string
 	}
 
-	let { id, children }: Props = $props()
+	let { id, children, class: clazz }: Props = $props()
+
 	let job: Job | undefined = $state(undefined)
 	let hovered = $state(false)
 	let timeout: number | undefined
@@ -101,11 +104,51 @@
 	{#if open}
 		<div
 			transition:fade|local={{ duration: 50 }}
-			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-surface rounded
-			border shadow-xl flex justify-start items-start w-[600px] h-80
-			overflow-hidden"
+			class={twMerge(
+				'absolute z-50  -left-10 bg-surface rounded border shadow-md flex flex-col gap-4 items-start w-[600px] h-80 overflow-hidden',
+				popupOnTop ? 'bottom-[35px]' : 'top-[35px]',
+				clazz
+			)}
 		>
-			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
+			<div class="w-full flex flex-row grow min-h-0 gap-2">
+				<div class="w-1/2 h-full overflow-auto space-y-1">
+					<span class="text-xs font-normal text-secondary">Arguments</span>
+					<JobArgs
+						id={job?.id}
+						workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
+						args={job?.args}
+					/>
+				</div>
+				<div class="w-1/2 h-full overflow-auto space-y-1">
+					{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+						<div class="text-xs font-semibold text-emphasis mb-1">
+							<div>Job is scheduled for</div>
+							<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
+						</div>
+					{/if}
+					{#if job?.type === 'CompletedJob'}
+						<span class="text-xs font-normal text-secondary mb-1">Result</span>
+						<DisplayResult
+							workspaceId={job?.workspace_id}
+							jobId={job?.id}
+							{result}
+							disableExpand
+							language={job?.language}
+						/>
+					{:else if job && `running` in job ? job.running : false}
+						<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
+						<LogViewer
+							jobId={job?.id}
+							duration={job?.['duration_ms']}
+							mem={job?.['mem_peak']}
+							content={job?.logs}
+							isLoading={job?.['running'] == false}
+							tag={job?.tag}
+						/>
+					{/if}
+				</div>
+			</div>
+			<div class="flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
 				{#if job?.started_at}
 					<Badge>{new Date(job?.['started_at']).toLocaleString()}</Badge>
 				{/if}
@@ -125,40 +168,6 @@
 					{/each}
 				{/if}
 			</div>
-			<div class="w-1/2 h-full overflow-auto">
-				<JobArgs
-					id={job?.id}
-					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
-					args={job?.args}
-				/>
-			</div>
-			<div class="w-1/2 h-full overflow-auto p-2">
-				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-					<div class="text-xs font-semibold text-emphasis mb-1">
-						<div>Job is scheduled for</div>
-						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
-					</div>
-				{/if}
-				{#if job?.type === 'CompletedJob'}
-					<DisplayResult
-						workspaceId={job?.workspace_id}
-						jobId={job?.id}
-						{result}
-						disableExpand
-						language={job?.language}
-					/>
-				{:else if job && `running` in job ? job.running : false}
-					<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
-					<LogViewer
-						jobId={job?.id}
-						duration={job?.['duration_ms']}
-						mem={job?.['mem_peak']}
-						content={job?.logs}
-						isLoading={job?.['running'] == false}
-						tag={job?.tag}
-					/>
-				{/if}
-			</div>
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 5420fe36f8..61e498a58b 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -520,7 +520,7 @@
 										{#each jobs ?? [] as job}
 											{@const h = (avg_s ? job.duration_ms / avg_s : 1) * 7 + 3}
 											<a href="{base}/run/{job.id}?workspace={$workspaceStore}">
-												<JobPreview id={job.id}>
+												<JobPreview id={job.id} class="p-4">
 													<div>
 														<div
 															class="{job.success ? 'bg-green-300' : 'bg-red-300'} mx-auto w-1.5"