From 82dd084e116bb1d8d36385d677c863e1ab925a1e Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 16 Apr 2025 16:06:04 +0200
Subject: [PATCH] flow nodes feel much better to click on

---
 .../flows/map/FlowModuleSchemaItem.svelte        | 10 ++++++++--
 .../flows/map/VirtualItemWrapper.svelte          | 16 ++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 84f59161da..702d69fef4 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -198,12 +198,18 @@
 		'w-full module flex rounded-sm cursor-pointer max-w-full',
 		selected ? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400' : '',
 		'flex relative',
-		$copilotCurrentStepStore === id ? 'z-[901]' : ''
+		$copilotCurrentStepStore === id ? 'z-[901]' : '',
+		'hover:!bg-surface-secondary active:!bg-surface'
 	)}
 	style="width: 275px; height: 38px; background-color: {bgColor};"
 	on:mouseenter={() => (hover = true)}
 	on:mouseleave={() => (hover = false)}
-	on:pointerdown|preventDefault|stopPropagation
+	on:pointerdown|preventDefault|stopPropagation={() =>
+		// setTimeout to avoid freezing event loop that handles css on pointerdown
+		// which makes the button feel reactive
+		setTimeout(() => {
+			dispatch('pointerdown')
+		})}
 >
 	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
 		{#if retry}
diff --git a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
index f1ce5ee1bb..0fd501dac1 100644
--- a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
@@ -28,19 +28,19 @@
 <div
 	class={classNames(
 		'w-full flex relative rounded-sm',
-		selectable ? 'cursor-pointer' : '',
+		selectable ? 'cursor-pointer hover:!bg-surface-secondary active:!bg-surface' : '',
 		selected ? 'outline outline-offset-1 outline-2  outline-gray-600 dark:outline-gray-400' : '',
 		onTop ? 'z-[901]' : ''
 	)}
-	style="width: 275px; max-height: 38px; background-color: {bgColor} !important;"
+	style="width: 275px; max-height: 38px; background-color: {bgColor};"
 	on:pointerdown={() => {
-		if (selectable) {
-			if (id) {
-				dispatch('select', id)
-			} else {
-				dispatch('select', label || label || '')
+		// setTimeout to avoid freezing event loop that handles css on pointerdown
+		// which makes the button feel reactive
+		setTimeout(() => {
+			if (selectable) {
+				dispatch('select', id || label || '')
 			}
-		}
+		})
 	}}
 	on:mouseenter={() => {
 		hover = true