From 08f82632c86bdfafe07c1b4f68f535013814e0fd Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 5 Nov 2024 08:30:54 +0100
Subject: [PATCH] Move node prop picker

---
 .../src/lib/components/common/button/AnimatedButton.svelte | 4 +++-
 .../lib/components/flows/map/FlowModuleSchemaItem.svelte   | 2 +-
 frontend/src/lib/components/flows/map/VirtualItem.svelte   | 2 +-
 .../lib/components/flows/propPicker/FlowPropPicker.svelte  | 7 ++++---
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/common/button/AnimatedButton.svelte b/frontend/src/lib/components/common/button/AnimatedButton.svelte
index ed7fa30a4b..d05f668b82 100644
--- a/frontend/src/lib/components/common/button/AnimatedButton.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButton.svelte
@@ -11,7 +11,9 @@
 	let clientWidth = 0
 	let clientHeight = 0
 
-	$: circleRadius = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
+	$: circleRadius = Math.ceil(
+		Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
+	)
 </script>
 
 <div
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 6b996b8b05..4de0bd4b68 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -276,7 +276,7 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 	</div>
 
 	{#if id && $propPickerConfig && pickableIds && Object.keys(pickableIds).includes(id)}
-		<div class="absolute -top-[14px] right-[200px]">
+		<div class="absolute -bottom-[18px] right-[50%] translate-x-[50%]">
 			<FlowPropPicker
 				json={{
 					[id]: pickableIds[id]
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 9806aa3218..d0a659043e 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -82,7 +82,7 @@
 		</div>
 	</div>
 	{#if propPickerConfig && Object.keys(inputJson).length > 0}
-		<div class="absolute -top-[14px] right-[200px]">
+		<div class="absolute -bottom-[18px] right-[50%] translate-x-[50%]">
 			<FlowPropPicker json={inputJson} {prefix} />
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte b/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte
index f2dfc5dbdf..435896e9f9 100644
--- a/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte
+++ b/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte
@@ -25,8 +25,9 @@
 >
 	<AnimatedButton
 		animate={$propPickerConfig?.insertionMode === 'connect' && !viewOnly}
-		wrapperClasses=" h-fit w-fit center-center"
+		wrapperClasses="h-[20px] w-[20px] "
 		baseRadius="9999px"
+		marginWidth="1px"
 	>
 		<Popup floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}>
 			<svelte:fragment slot="button" let:open>
@@ -34,7 +35,7 @@
 					<svelte:fragment slot="text">node outputs</svelte:fragment>
 					<button
 						class={twMerge(
-							'rounded-full trash center-center h-[20px] w-[20px]',
+							'rounded-full trash center-center h-[18px] w-[18px]',
 							viewOnly
 								? 'outline-[1px] outline dark:outline-gray-500 outline-gray-300 duration-150 bg-surface hover:bg-surface-hover text-secondary'
 								: $propPickerConfig?.insertionMode == 'connect'
@@ -42,7 +43,7 @@
 								: 'outline-[1px] outline dark:outline-gray-500 outline-gray-300 duration-150 bg-blue-500 hover:bg-blue-700 text-white'
 						)}
 					>
-						<Plug class="mx-[3px]" size={12} strokeWidth={2} />
+						<Plug size={12} strokeWidth={2} />
 					</button>
 				</Popover>
 			</svelte:fragment>