diff --git a/frontend/src/lib/components/jobs/JobDetail.svelte b/frontend/src/lib/components/jobs/JobDetail.svelte
index 77de2788e2..d5eb137999 100644
--- a/frontend/src/lib/components/jobs/JobDetail.svelte
+++ b/frontend/src/lib/components/jobs/JobDetail.svelte
@@ -66,63 +66,63 @@
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 
-<JobPreview {job}>
-	<div class="border border-gray-400 rounded py-4">
-		<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
-			<div class="flex-col col-span-2">
-				<div class="flex flex-row text-sm">
-					{#if job === undefined}
-						No job found
-					{:else}
-						<div class="block text-center align-middle px-6">
-							{#if 'success' in job && job.success}
-								{#if job.is_skipped}
-									<Icon
-										class="text-green-600"
-										data={faFastForward}
-										scale={SMALL_ICON_SCALE}
-										label="Job completed successfully but was skipped"
-									/>
-								{:else}
-									<Icon
-										class="text-green-600"
-										data={check}
-										scale={SMALL_ICON_SCALE}
-										label="Job completed successfully"
-									/>
-								{/if}
-							{:else if 'success' in job}
+<div class="border border-gray-400 rounded py-4">
+	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
+		<div class="flex-col col-span-2">
+			<div class="flex flex-row text-sm">
+				{#if job === undefined}
+					No job found
+				{:else}
+					<div class="block text-center align-middle px-6">
+						{#if 'success' in job && job.success}
+							{#if job.is_skipped}
 								<Icon
-									class="text-red-700"
-									data={faTimes}
+									class="text-green-600"
+									data={faFastForward}
 									scale={SMALL_ICON_SCALE}
-									label="Job completed with an error"
-								/>
-							{:else if 'running' in job && job.running}
-								<Icon
-									class="text-yellow-500"
-									data={faCircle}
-									scale={SMALL_ICON_SCALE}
-									label="Job is running"
-								/>
-							{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
-								<Icon
-									class="text-gray-700"
-									data={faCalendar}
-									scale={SMALL_ICON_SCALE}
-									label="Job is scheduled to run at a later time"
+									label="Job completed successfully but was skipped"
 								/>
 							{:else}
 								<Icon
-									class="text-gray-500"
-									data={faHourglassHalf}
+									class="text-green-600"
+									data={check}
 									scale={SMALL_ICON_SCALE}
-									label="Job is waiting for an executor"
+									label="Job completed successfully"
 								/>
 							{/if}
-						</div>
+						{:else if 'success' in job}
+							<Icon
+								class="text-red-700"
+								data={faTimes}
+								scale={SMALL_ICON_SCALE}
+								label="Job completed with an error"
+							/>
+						{:else if 'running' in job && job.running}
+							<Icon
+								class="text-yellow-500"
+								data={faCircle}
+								scale={SMALL_ICON_SCALE}
+								label="Job is running"
+							/>
+						{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
+							<Icon
+								class="text-gray-700"
+								data={faCalendar}
+								scale={SMALL_ICON_SCALE}
+								label="Job is scheduled to run at a later time"
+							/>
+						{:else}
+							<Icon
+								class="text-gray-500"
+								data={faHourglassHalf}
+								scale={SMALL_ICON_SCALE}
+								label="Job is waiting for an executor"
+							/>
+						{/if}
+					</div>
 
-						<div class="flex flex-row space-x-2">
+					<div class="flex flex-row space-x-2">
+						<JobPreview {job}>
 							<div class="whitespace-nowrap">
 								{#if job.script_path}
 									<a href="/run/{job.id}?workspace={job.workspace_id}">{job.script_path} </a>
@@ -142,111 +142,108 @@
 									}}><Badge><Icon scale={0.7} data={faSearch} /></Badge></button
 								>
 							</div>
-							<div class="whitespace-nowrap">
-								{#if 'job_kind' in job}<a href="/run/{job.id}"
-										><Badge color="blue">{job.job_kind}</Badge></a
-									>
-								{/if}
-								{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
-									<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
-										><Badge color="gray">flow step</Badge></a
-									>
-								{/if}
-							</div>
-						</div>
-					{/if}
-				</div>
-				<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
-					>{truncateRev(job.id, 8, '')}</div
-				>
-			</div>
-			<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
-				<div
-					class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden"
-				>
-					<div>
-						<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
-							By {job.created_by}</span
-						>
-					</div>
-					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-						<div>
-							<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
-								class="mx-2"
-							>
-								Ran in {msToSec(job.duration_ms)}s</span
-							>
-						</div>
-					{/if}
-				</div>
-				<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
-					{#if 'started_at' in job && job.started_at}
-						<div>
-							<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-								class="mx-1.5"
-							>
-								<span>
-									{#if job?.['duration_ms']}
-										Ended {#key time}
-											{endedDate(job.started_at, job?.['duration_ms'])}{/key}
-									{:else}
-										Started {#key time}
-											{displayDaysAgo(job.started_at ?? '')}{/key}
-									{/if}</span
-								>
-							</span></div
-						>
-					{/if}
-					{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-						<div class="inline-flex gap-1">
-							<CalendarClock size={13} class="-ml-0.5" />
-							<span>
-								<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
-								for {displayDate(job.scheduled_for ?? '')}
-							</span>
-						</div>
-					{:else if 'scheduled_for' in job && !job.running}
-						<div>
-							<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-								class="mx-2"
-							>
-								<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
-									>Waiting for an executor</span
-								>
-							</span>
-						</div>
-					{/if}
-					<div>
-						{#if job && job.parent_job}
-							{#if job.is_flow_step}
-								<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
-									class="mx-1"
-								>
-									Step of flow <a href={`/run/${job.parent_job}`}
-										>{truncateRev(job.parent_job, 6)}</a
-									></span
-								>
-							{:else}
-								<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
-									class="mx-1"
-								>
-									Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+						</JobPreview>
+						<div class="whitespace-nowrap">
+							{#if 'job_kind' in job}<a href="/run/{job.id}"
+									><Badge color="blue">{job.job_kind}</Badge></a
 								>
 							{/if}
-						{:else if job && job.schedule_path}
-							<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
-							<span class="mx-1"
-								>Schedule <button
-									class="break-words text-blue-400 font-normal truncate text-xs"
-									on:click={() =>
-										scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
-									>{job.schedule_path}</button
+							{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
+								<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
+									><Badge color="gray">flow step</Badge></a
+								>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+			<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
+				>{truncateRev(job.id, 8, '')}</div
+			>
+		</div>
+		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
+			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
+				<div>
+					<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+						By {job.created_by}</span
+					>
+				</div>
+				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+					<div>
+						<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							Ran in {msToSec(job.duration_ms)}s</span
+						>
+					</div>
+				{/if}
+			</div>
+			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+				{#if 'started_at' in job && job.started_at}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-1.5"
+						>
+							<span>
+								{#if job?.['duration_ms']}
+									Ended {#key time}
+										{endedDate(job.started_at, job?.['duration_ms'])}{/key}
+								{:else}
+									Started {#key time}
+										{displayDaysAgo(job.started_at ?? '')}{/key}
+								{/if}</span
+							>
+						</span></div
+					>
+				{/if}
+				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+					<div class="inline-flex gap-1">
+						<CalendarClock size={13} class="-ml-0.5" />
+						<span>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
+							for {displayDate(job.scheduled_for ?? '')}
+						</span>
+					</div>
+				{:else if 'scheduled_for' in job && !job.running}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
+								>Waiting for an executor</span
+							>
+						</span>
+					</div>
+				{/if}
+				<div>
+					{#if job && job.parent_job}
+						{#if job.is_flow_step}
+							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
 								></span
 							>
+						{:else}
+							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+							>
 						{/if}
-					</div>
+					{:else if job && job.schedule_path}
+						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+						<span class="mx-1"
+							>Schedule <button
+								class="break-words text-blue-400 font-normal truncate text-xs"
+								on:click={() =>
+									scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+								>{job.schedule_path}</button
+							></span
+						>
+					{/if}
 				</div>
 			</div>
 		</div>
 	</div>
-</JobPreview>
+</div>
diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index f468d02594..492f5e9b8b 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -93,8 +93,8 @@
 	{#if open}
 		<div
 			transition:fade|local={{ duration: 100 }}
-			class="absolute z-50 {popupOnTop ? 'bottom-[65px]' : 'top-[65px]'} left-4 bg-white rounded
-			border border-gray-300 shadow-xl flex justify-start items-start w-[600px] max-w-full h-60
+			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-white rounded
+			border border-gray-300 shadow-xl flex justify-start items-start w-[600px] h-80
 			overflow-hidden"
 		>
 			<div class="w-1/2 h-full overflow-auto px-2">