From 0be8982ddc263b76dab2c87cb6fa63e21effd58c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 14 Aug 2024 00:26:24 +0200
Subject: [PATCH] fix: improve scrolling performance of the runs page

---
 .../apps/editor/AppEditorHeader.svelte        | 24 ++++++++++---------
 .../src/lib/components/runs/RunRow.svelte     | 11 +++------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 35d873020b..113d45eb13 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -938,17 +938,19 @@
 			<h2>Public URL</h2>
 			<div class="mt-4" />
 
-			<Toggle
-				options={{
-					left: `Require login and read-access`,
-					right: `No login required`
-				}}
-				checked={policy.execution_mode == 'anonymous'}
-				on:change={(e) => {
-					policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
-					setPublishState()
-				}}
-			/>
+			<div class="flex gap-2 items-center">
+				<Toggle
+					options={{
+						left: `Require login and read-access`,
+						right: `No login required`
+					}}
+					checked={policy.execution_mode == 'anonymous'}
+					on:change={(e) => {
+						policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
+						setPublishState()
+					}}
+				/>
+			</div>
 
 			<div class="my-6 box">
 				Public url:
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index d7fd40f04e..8d9f5a9a7a 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -39,8 +39,6 @@
 
 	$: isExternal = job && job.id === '-'
 
-	let triggeredByWidth: number = 0
-
 	function isJobCancelable(j: Job): boolean {
 		return j.type === 'QueuedJob' && !j.schedule_path
 	}
@@ -240,7 +238,7 @@
 			{/if}
 		</div>
 	{/if}
-	<div class="w-3/12 flex justify-start" bind:clientWidth={triggeredByWidth}>
+	<div class="w-3/12 flex justify-start">
 		{#if job && job.schedule_path}
 			<div class="flex flex-row items-center gap-1">
 				<Calendar size={14} />
@@ -250,11 +248,8 @@
 					btnClasses="font-normal"
 					on:click={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 				>
-					<div
-						class="truncate text-ellipsis text-left"
-						style="max-width: {triggeredByWidth - 48}px"
-					>
-						{job.schedule_path}
+					<div class="truncate text-ellipsis text-left">
+						{truncateRev(job.schedule_path, 20)}
 					</div>
 				</Button>
 				<Button