From 8526c19da243604679b2a2557163317196f7f16b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 23 Aug 2022 16:28:24 +0200
Subject: [PATCH] fix runs page design

---
 frontend/src/routes/runs/[...path].svelte     | 88 +++++++++----------
 .../src/routes/scripts/get/[...hash].svelte   |  6 +-
 2 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/frontend/src/routes/runs/[...path].svelte b/frontend/src/routes/runs/[...path].svelte
index 135ab4e77d..af615ddfb4 100644
--- a/frontend/src/routes/runs/[...path].svelte
+++ b/frontend/src/routes/runs/[...path].svelte
@@ -206,7 +206,7 @@ the bearer token they use has less privilege."
 			{#if jobs}
 				{#each jobs as job}
 					<div class="border rounded">
-						<div class="flex flex-row">
+						<div class="grid grid-cols-2 w-full">
 							<div class="flex-col py-2 grow">
 								<div class="flex flex-row text-sm">
 									{#if job === undefined}
@@ -292,50 +292,8 @@ the bearer token they use has less privilege."
 									>
 								</div>
 							</div>
-							<div class="flex flex-row-reverse py-4 max-w-xs w-xs mr-8 place-self-end">
-								<div
-									class="shrink text-gray-500 text-xs text-left place-self-start flex flex-col gap-1"
-								>
-									<div>
-										<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-											class="mx-2"
-										>
-											Created {displayDaysAgo(job.created_at ?? '')}</span
-										>
-									</div>
-									{#if 'started_at' in job && job.started_at}
-										<div>
-											<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-												class="mx-2"
-											>
-												Started {displayDaysAgo(job.started_at ?? '')}</span
-											>
-										</div>
-									{/if}
-									{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-										<div>
-											<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} /><span
-												class="mx-2"
-											>
-												<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>
-								<div class="grow w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4">
+							<div class="bg-white grid grid-cols-2 py-4 gap-x-2">
+								<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4">
 									<div>
 										<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span
 											class="mx-2"
@@ -382,6 +340,46 @@ the bearer token they use has less privilege."
 										{/if}
 									</div>
 								</div>
+								<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+									<div>
+										<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+											class="mx-2"
+										>
+											Created {displayDaysAgo(job.created_at ?? '')}</span
+										>
+									</div>
+									{#if 'started_at' in job && job.started_at}
+										<div>
+											<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+												class="mx-2"
+											>
+												Started {displayDaysAgo(job.started_at ?? '')}</span
+											>
+										</div>
+									{/if}
+									{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+										<div>
+											<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} /><span
+												class="mx-2"
+											>
+												<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>
 							</div>
 						</div>
 					</div>
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index a45e9775c5..8ddadb152f 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -311,10 +311,8 @@
 
 				<pre><code
 						>By hash: <a
-							href="//{$page.url
-								.hostname}/api/w/{$workspaceStore}/jobs/run/h/{script?.hash}"
-							>{$page.url
-								.hostname}/api/w/{$workspaceStore}/jobs/run/h/{script?.hash}</a
+							href="//{$page.url.hostname}/api/w/{$workspaceStore}/jobs/run/h/{script?.hash}"
+							>{$page.url.hostname}/api/w/{$workspaceStore}/jobs/run/h/{script?.hash}</a
 						></code
 					></pre>
 				<pre><code