improve labels handling

frontend/src/lib/components/jobs/JobPreview.svelte

@@ -110,6 +110,11 @@
 				{#if job?.['duration_ms']}
 					<DurationMs duration_ms={job?.['duration_ms']} />
 				{/if}
+				{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+					{#each job?.['labels'] as label}
+						<Badge>Label: {label}</Badge>
+					{/each}
+				{/if}
 			</div>
 			<div class="w-1/2 h-full overflow-auto">
 				<JobArgs args={job?.args} />

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

@@ -55,7 +55,7 @@
 />
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
-		<div class="flex gap-2">
+		<div class="flex gap-2 flex-wrap">
 			{#if job?.['priority']}
 				<Badge color="red">
 					priority: {job?.['priority']}
@@ -79,6 +79,11 @@
 					Tag: {job.tag}
 				</Badge>
 			{/if}
+			{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+				{#each job?.['labels'] as label}
+					<Badge baseClass="text-2xs">Label: {label}</Badge>
+				{/each}
+			{/if}
 		</div>
 		<a
 			href="/run/{job?.id}?workspace={job?.workspace_id}"

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

@@ -178,13 +178,16 @@
 	{#if containsLabel}
 		<div class="w-3/12 flex justify-start">
 			{#if job && job?.['labels']}
-				<div class="flex flex-row items-center gap-1">
+				<div class="flex flex-row items-center gap-1 overflow-x-auto">
 					{#if Array.isArray(job?.['labels'])}
 						{#each job?.['labels'] as label}
 							<Button
 								variant="border"
 								size="xs2"
-								btnClasses={activeLabel == label ? 'bg-blue-50 dark:bg-blue-900/50' : undefined}
+								btnClasses={twMerge(
+									activeLabel == label ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+									'!text-2xs !font-normal truncate max-w-28'
+								)}
 								color="light"
 								on:click={() => {
 									dispatch('filterByLabel', label)

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

@@ -590,7 +590,7 @@
 						<Hourglass class="text-tertiary" size={14} />
 					{/if}
 					{job.script_path ?? (job.job_kind == 'dependencies' ? 'lock dependencies' : 'No path')}
-					<div class="flex flex-row gap-2 items-center">
+					<div class="flex flex-row gap-2 items-center flex-wrap">
 						{#if job.script_hash}
 							<a href="/scripts/get/{job.script_hash}?workspace={$workspaceStore}"
 								><Badge color="gray">{truncateHash(job.script_hash)}</Badge></a
@@ -625,6 +625,13 @@
 								</Badge></div
 							>
 						{/if}
+						{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+							{#each job?.['labels'] as label}
+								<div>
+									<Badge>Label: {label}</Badge>
+								</div>
+							{/each}
+						{/if}
 					</div>
 				{/if}
 			</div>