nit UX on FlowPreviewContent

backend/tests/worker.rs

@@ -1061,10 +1061,9 @@ async fn test_deno_flow(db: Pool<Postgres>) {
 
     for i in 0..50 {
         println!("deno flow iteration: {}", i);
-        let result = run_job_in_new_worker_until_complete(&db, job.clone(), port)
-            .await
-            .result
-            .unwrap();
+        let job = run_job_in_new_worker_until_complete(&db, job.clone(), port).await;
+        // println!("job: {:#?}", job.flow_status);
+        let result = job.result.unwrap();
         assert_eq!(result, serde_json::json!([2, 4, 6]), "iteration: {}", i);
     }
 }

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -96,7 +96,7 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
-	<div class="flex flex-row justify-between w-full ">
+	<div class="flex flex-row justify-between w-full items-center gap-x-1">
 		<Button
 			variant="border"
 			size="lg"
@@ -118,7 +118,7 @@
 				class="text-lg leading-6 font-bold text-gray-900 inline-flex flex-row justify-between w-full"
 			>
 				<div>
-					Test preview - {previewMode === 'upTo'
+					Test {previewMode === 'upTo'
 						? `up to step ${$selectedId.split('-').join(',')}`
 						: ' whole flow'}
 				</div>

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -95,7 +95,9 @@
 						}
 					}}
 				>
-					#{j + 1}: {loopJobId}
+					<span class="truncate">
+						#{j + 1}: {loopJobId}
+					</span>
 
 					<Icon
 						class="ml-2"