From c0704a9efce09ba4c8aa909b2450c2cedc5e86fe Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 1 Sep 2025 11:53:56 +0100
Subject: [PATCH]  typo (#6503)

* Fix typo

* improve debounce on popover
---
 frontend/src/lib/components/RunChart.svelte   |  6 +++---
 .../components/meltComponents/Popover.svelte  | 19 ++++++++++++-------
 .../lib/components/runs/JobRunsPreview.svelte | 18 +++++++++---------
 .../src/lib/components/runs/RunRow.svelte     |  2 +-
 .../src/lib/components/runs/RunsFilter.svelte |  6 +++---
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 0ea14fec29..7d9d15ddd7 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -48,9 +48,9 @@
 
 	const SUCCESS_COLOR = '#4ade80'
 	// const SUCCESS_COLOR_TRANSPARENT = '#c9b638'
-	const SUCCESS_COLOR_TRANSPARENT = $derived(mergeColors(SUCCESS_COLOR, getBackgorundColor(), 0.8))
+	const SUCCESS_COLOR_TRANSPARENT = $derived(mergeColors(SUCCESS_COLOR, getBackgroundColor(), 0.8))
 	const FAIL_COLOR = '#f87171'
-	const FAIL_COLOR_TRANSPARENT = $derived(mergeColors(FAIL_COLOR, getBackgorundColor(), 0.8))
+	const FAIL_COLOR_TRANSPARENT = $derived(mergeColors(FAIL_COLOR, getBackgroundColor(), 0.8))
 
 	ChartJS.register(
 		Title,
@@ -96,7 +96,7 @@
 		ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
 	})
 
-	function getBackgorundColor(): string {
+	function getBackgroundColor(): string {
 		return darkMode ? '#2e3440' : '#ffffff'
 	}
 	function hexToRgb(hexColor: string): number[] {
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index cb1510cb43..3762b01ff7 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -44,7 +44,6 @@
 
 	function clearTimers() {
 		clearDebounceClose()
-		clearDebounceOpen()
 	}
 
 	// Cleanup timers on component destruction
@@ -124,10 +123,6 @@
 		() => openOnHover && close(),
 		debounceDelay
 	)
-	let { debounced: debounceOpen, clearDebounce: clearDebounceOpen } = debounce(
-		() => openOnHover && open(),
-		debounceDelay
-	)
 </script>
 
 <button
@@ -135,7 +130,12 @@
 	use:melt={$trigger}
 	aria-label="Popup button"
 	disabled={disablePopup || disabled}
-	on:mouseenter={debounceOpen}
+	on:mouseenter={() => {
+		if (openOnHover) {
+			open()
+			clearDebounceClose()
+		}
+	}}
 	on:mouseleave={debounceClose}
 	use:pointerDownOutside={{
 		capture: true,
@@ -160,7 +160,12 @@
 
 {#if isOpen && !disablePopup}
 	<div
-		on:mouseenter={debounceOpen}
+		on:mouseenter={() => {
+			if (openOnHover) {
+				open()
+				clearDebounceClose()
+			}
+		}}
 		on:mouseleave={debounceClose}
 		use:melt={$content}
 		transition:fade={{ duration: 0 }}
diff --git a/frontend/src/lib/components/runs/JobRunsPreview.svelte b/frontend/src/lib/components/runs/JobRunsPreview.svelte
index 0e95937286..78dffdf776 100644
--- a/frontend/src/lib/components/runs/JobRunsPreview.svelte
+++ b/frontend/src/lib/components/runs/JobRunsPreview.svelte
@@ -80,7 +80,7 @@
 	let jobLoader: JobLoader | undefined = $state(undefined)
 
 	// Set all tabs content to the same height to prevent layout jumps
-	let tabsHeigh = $state({
+	let tabsHeight = $state({
 		codeHeight: 0,
 		logsHeight: 0,
 		assetsHeight: 0,
@@ -89,10 +89,10 @@
 
 	let minTabHeight = $derived(
 		Math.max(
-			tabsHeigh.codeHeight,
-			tabsHeigh.logsHeight,
-			tabsHeigh.assetsHeight,
-			tabsHeigh.resultHeight
+			tabsHeight.codeHeight,
+			tabsHeight.logsHeight,
+			tabsHeight.assetsHeight,
+			tabsHeight.resultHeight
 		)
 	)
 
@@ -235,7 +235,7 @@
 								{#if viewTab == 'logs'}
 									<div
 										class="w-full"
-										bind:clientHeight={tabsHeigh.logsHeight}
+										bind:clientHeight={tabsHeight.logsHeight}
 										style="min-height: {minTabHeight}px"
 									>
 										<LogViewer
@@ -250,7 +250,7 @@
 								{:else if viewTab == 'assets'}
 									<div
 										class="w-full h-full"
-										bind:clientHeight={tabsHeigh.assetsHeight}
+										bind:clientHeight={tabsHeight.assetsHeight}
 										style="min-height: {minTabHeight}px"
 									>
 										<JobAssetsViewer {job} />
@@ -258,7 +258,7 @@
 								{:else if viewTab == 'code'}
 									<div
 										class="text-xs"
-										bind:clientHeight={tabsHeigh.codeHeight}
+										bind:clientHeight={tabsHeight.codeHeight}
 										style="min-height: {minTabHeight}px"
 									>
 										{#if job && 'raw_code' in job && job.raw_code}
@@ -274,7 +274,7 @@
 								{:else if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined))}
 									<div
 										class="w-full"
-										bind:clientHeight={tabsHeigh.resultHeight}
+										bind:clientHeight={tabsHeight.resultHeight}
 										style="min-height: {minTabHeight}px"
 									>
 										<DisplayResult
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 0e805bde19..b6858a0467 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -337,7 +337,7 @@
 				>
 					<Calendar size={14} />
 				</Button>
-				<div class="text-xs truncate text-ellipsis text-lef" dir="rtl" title={job.schedule_path}>
+				<div class="text-xs truncate text-ellipsis text-left" dir="rtl" title={job.schedule_path}>
 					{job.schedule_path}
 				</div>
 				<DropdownV2
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
index 5b98884f1b..fdd2936fcd 100644
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ b/frontend/src/lib/components/runs/RunsFilter.svelte
@@ -153,8 +153,8 @@
 {#snippet dependenciesTooltip()}
 	<TooltipV2 placement="right">
 		{#snippet text()}
-			'Deploying a script, flow or an app launch a dependency job that create and then attach the
-			lockfile to the deployed item. This mechanism ensure that logic is always executed with the
+			'Deploying a script, flow or an app launch a dependency job that creates and then attaches the
+			lockfile to the deployed item. This mechanism ensures that logic is always executed with the
 			exact same direct and indirect dependencies.'
 		{/snippet}
 	</TooltipV2>
@@ -163,7 +163,7 @@
 	<TooltipV2 placement="right">
 		{#snippet text()}
 			'Sync jobs that are triggered on every script deployment to sync the workspace with the Git
-			repository configured in the the workspace settings'
+			repository configured in the workspace settings'
 		{/snippet}
 	</TooltipV2>
 {/snippet}