From d31b1800be85cc7b19da4bc7d51423b9154b0b4e Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Wed, 12 Nov 2025 11:20:39 +0100
Subject: [PATCH] Fix animated button opacity nit (#7114)

---
 frontend/src/lib/components/FlowPlugConnect.svelte            | 2 +-
 frontend/src/lib/components/InputTransformForm.svelte         | 4 ++--
 .../apps/editor/settingsPanel/InputsSpecEditor.svelte         | 1 -
 .../src/lib/components/common/button/ConnectionButton.svelte  | 2 +-
 .../src/lib/components/propertyPicker/ObjectViewer.svelte     | 1 +
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/FlowPlugConnect.svelte b/frontend/src/lib/components/FlowPlugConnect.svelte
index 10b00e7301..1cf48f61a4 100644
--- a/frontend/src/lib/components/FlowPlugConnect.svelte
+++ b/frontend/src/lib/components/FlowPlugConnect.svelte
@@ -14,7 +14,7 @@
 		variant="default"
 		btnClasses={twMerge(
 			connecting ? 'text-accent' : '',
-			'bg-surface group/plug-btn overflow-clip flex p-0'
+			'bg-surface hover:bg-surface group/plug-btn overflow-clip flex p-0'
 		)}
 		on:click
 		{...id ? { id } : {}}
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 7d3b2f464f..2dc5672d25 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -528,7 +528,7 @@
 							{pickableProperties}
 							{argName}
 							btnClass={twMerge(
-								'h-6 min-w-8 px-2',
+								'h-7 min-w-8 px-2',
 								'group-hover:opacity-100 transition-opacity',
 								!connecting ? 'opacity-0' : ''
 							)}
@@ -538,7 +538,7 @@
 					{#if propPickerWrapperContext}
 						<FlowPlugConnect
 							wrapperClasses={twMerge(
-								connecting ? 'h-5 w-7' : 'h-6 w-8',
+								connecting ? 'h-6 w-7' : 'h-7 w-8',
 								'group-hover:opacity-100 transition-opacity p-0',
 								!connecting ? 'opacity-0' : ''
 							)}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 1329c2e97f..ce4ab647dc 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -197,7 +197,6 @@
 						id="schema-plug-{key}"
 					/>
 					<ToggleButtonGroup
-						class="h-6"
 						bind:selected={componentInput.type}
 						on:selected={(e) => {
 							if (
diff --git a/frontend/src/lib/components/common/button/ConnectionButton.svelte b/frontend/src/lib/components/common/button/ConnectionButton.svelte
index 75d28f265e..57408b009d 100644
--- a/frontend/src/lib/components/common/button/ConnectionButton.svelte
+++ b/frontend/src/lib/components/common/button/ConnectionButton.svelte
@@ -99,7 +99,7 @@
 			on:click={() => handleConnect(true)}
 			{id}
 			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
-			btnClasses={small ? 'p-0' : ''}
+			btnClasses={twMerge(small ? 'p-0' : '', 'bg-surface hover:bg-surface')}
 		>
 			<Plug size={14} />
 		</Button>
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index a748d40e96..b22e1ceeac 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -268,6 +268,7 @@
 								variant="border"
 								wrapperClasses="p-0 whitespace-nowrap w-fit"
 								btnClasses={twMerge(
+									'hover:bg-surface',
 									'font-mono h-4 py-1 text-2xs',
 									'font-thin px-1 rounded-[0.275rem]',
 									metaData ? 'rounded-r-none border-r-0.5' : ''