fix: improve runs page drag

frontend/src/lib/components/RunChart.svelte

@@ -75,6 +75,7 @@
 			enabled: true,
 			modifierKey: 'ctrl' as 'ctrl',
 			onPanComplete: ({ chart }) => {
+				console.log(chart.scales.x.min)
 				dispatch('zoom', {
 					min: addSeconds(new Date(chart.scales.x.min), -1),
 					max: addSeconds(new Date(chart.scales.x.max), 1)
@@ -128,6 +129,7 @@
 		minTimeSet: string | undefined,
 		maxTimeSet: string | undefined
 	) {
+		console.log(minTimeSet, maxTimeSet)
 		let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined
 		let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined
 		if (minTimeSetDate && maxTimeSetDate) {

frontend/src/lib/components/runs/JobLoader.svelte

@@ -86,7 +86,7 @@
 			jobKinds,
 			success: success == 'success' ? true : success == 'failure' ? false : undefined,
 			running: success == 'running' ? true : undefined,
-			isSkipped: isSkipped ? true : undefined,
+			isSkipped: isSkipped ? undefined : false,
 			isFlowStep: jobKindsCat != 'all' ? false : undefined,
 			args:
 				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,

frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte

@@ -322,6 +322,8 @@
 
 		<div class="p-2 w-full">
 			<RunChart
+				minTimeSet={minTs}
+				maxTimeSet={maxTs}
 				maxIsNow={maxTs == undefined}
 				jobs={completedJobs}
 				on:zoom={async (e) => {
@@ -480,6 +482,8 @@
 		</div>
 		<div class="p-2 w-full">
 			<RunChart
+				minTimeSet={minTs}
+				maxTimeSet={maxTs}
 				maxIsNow={maxTs == undefined}
 				jobs={completedJobs}
 				on:zoom={async (e) => {
@@ -489,8 +493,8 @@
 				}}
 			/>
 		</div>
-		<div class="flex flex-col gap-1 md:flex-row w-full p-4">
-			<div class="flex items-center flex-row gap-2 grow mb-4">
+		<div class="flex flex-col gap-4 md:flex-row w-full p-4">
+			<div class="flex items-center flex-row gap-2 grow">
 				{#if queue_count}
 					<RunsQueue {queue_count} {allWorkspaces} />
 				{/if}
@@ -503,7 +507,7 @@
 					on:click={async () => (cancelAllJobs = true)}>Cancel All</Button
 				>
 			</div>
-			<div class="flex flex-row gap-1 w-full max-w-xl">
+			<div class="flex flex-row gap-1 w-full max-w-xl items-center">
 				<div class="relative w-full">
 					<div class="flex gap-1 relative w-full">
 						<span class="text-xs absolute -top-4">Min datetime</span>