From f5e1dbf3c16d61d668f24fdaa111656f8a276e8d Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 30 Oct 2025 20:33:13 +0100
Subject: [PATCH] Pause toast if any is hovered (#6965)

---
 frontend/src/lib/components/EditorBar.svelte | 6 +++---
 frontend/src/lib/components/Toast.svelte     | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 36149f061e..9085d48bfa 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -1005,9 +1005,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 									class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
 									title={user.name}
 								>
-									<span class="text-sm font-semibold leading-none text-white"
-										>{user.name.substring(0, 2).toLocaleUpperCase()}</span
-									>
+									<span class="text-sm font-semibold leading-none text-white">
+										{user.name.substring(0, 2).toLocaleUpperCase()}
+									</span>
 								</span>
 							{/each}
 						</div>
diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index 8728a631dd..a70855c8de 100644
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -7,9 +7,11 @@
 	function update(time: number) {
 		isLoopRunning = true
 		const delta = time - lastTime
+
+		let hover = Object.values(toastStates).some((state) => state.hover)
 		for (const toastId in toastStates) {
 			const state = toastStates[toastId]
-			if (state.hover) continue
+			if (hover) continue
 			if (state.elapsed >= state.duration) {
 				delete toastStates[toastId]
 				continue
@@ -82,6 +84,8 @@
 	let color = error
 		? { text: 'text-red-400', bg: 'bg-red-400' }
 		: { text: 'text-green-400', bg: 'bg-green-300' }
+
+	let hover = $derived(Object.values(toastStates).some((state) => state.hover))
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -140,7 +144,7 @@
 	</div>
 	<!-- Duration indicator -->
 	<div
-		class="h-0.5 {color.bg}"
+		class="h-0.5 transition-colors {hover ? 'bg-gray-300' : color.bg}"
 		style="width: {Math.max(0, 1 - (state?.elapsed ?? duration) / duration) * 100}%"
 	>
 	</div>