From 57d13a273327d95322de308754b1651184fde6ac Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sun, 30 Mar 2025 02:52:17 -0700
Subject: [PATCH] fix(ui/ux): handles

---
 .../sub-block/components/condition-input.tsx  | 12 +++++----
 .../workflow-block/workflow-block.tsx         | 26 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx
index fbf582e5f1..f5dd209b2a 100644
--- a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx
@@ -456,11 +456,13 @@ export function ConditionInput({ blockId, subBlockId, isConnecting }: ConditionI
               id={`condition-${block.id}`}
               key={`${block.id}-${index}`}
               className={cn(
-                '!w-3.5 !h-3.5',
-                '!bg-white !rounded-full !border !border-gray-200',
-                'group-hover:!border-blue-500',
-                '!transition-border !duration-150 !cursor-crosshair',
-                '!absolute !z-50',
+                '!w-[7px] !h-5',
+                '!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
+                '!z-[30]',
+                'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
+                'hover:!w-[10px] hover:!right-[-28px] hover:!rounded-r-full hover:!rounded-l-none',
+                '!cursor-crosshair',
+                'transition-all duration-150',
                 '!right-[-25px]'
               )}
               data-nodeid={`${blockId}-${subBlockId}`}
diff --git a/sim/app/w/[id]/components/workflow-block/workflow-block.tsx b/sim/app/w/[id]/components/workflow-block/workflow-block.tsx
index cd547d9d10..2c07e150b3 100644
--- a/sim/app/w/[id]/components/workflow-block/workflow-block.tsx
+++ b/sim/app/w/[id]/components/workflow-block/workflow-block.tsx
@@ -225,19 +225,21 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
             position={horizontalHandles ? Position.Left : Position.Top}
             id="target"
             className={cn(
-              '!w-[7px] !h-5',
+              horizontalHandles ? '!w-[7px] !h-5' : '!w-5 !h-[7px]',
               '!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
               '!z-[30]',
               'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
               horizontalHandles
                 ? 'hover:!w-[10px] hover:!left-[-10px] hover:!rounded-l-full hover:!rounded-r-none'
-                : 'hover:!h-[10px] hover:!translate-y-[-3px] hover:!rounded-t-full hover:!rounded-b-none',
+                : 'hover:!h-[10px] hover:!top-[-10px] hover:!rounded-t-full hover:!rounded-b-none',
               '!cursor-crosshair',
-              'transition-all duration-150',
+              'transition-[colors] duration-150',
               horizontalHandles ? '!left-[-7px]' : '!top-[-7px]'
             )}
             style={{
-              ...(horizontalHandles ? { top: '50%', transform: 'translateY(-50%)' } : {}),
+              ...(horizontalHandles
+                ? { top: '50%', transform: 'translateY(-50%)' }
+                : { left: '50%', transform: 'translateX(-50%)' }),
             }}
             data-nodeid={id}
             data-handleid="target"
@@ -376,19 +378,21 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
               position={horizontalHandles ? Position.Right : Position.Bottom}
               id="source"
               className={cn(
-                '!w-[7px] !h-5',
+                horizontalHandles ? '!w-[7px] !h-5' : '!w-5 !h-[7px]',
                 '!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
                 '!z-[30]',
                 'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
                 horizontalHandles
                   ? 'hover:!w-[10px] hover:!right-[-10px] hover:!rounded-r-full hover:!rounded-l-none'
-                  : 'hover:!h-[10px] hover:!translate-y-[3px] hover:!rounded-b-full hover:!rounded-t-none',
+                  : 'hover:!h-[10px] hover:!bottom-[-10px] hover:!rounded-b-full hover:!rounded-t-none',
                 '!cursor-crosshair',
-                'transition-all duration-150',
+                'transition-[colors] duration-150',
                 horizontalHandles ? '!right-[-7px]' : '!bottom-[-7px]'
               )}
               style={{
-                ...(horizontalHandles ? { top: '50%', transform: 'translateY(-50%)' } : {}),
+                ...(horizontalHandles
+                  ? { top: '50%', transform: 'translateY(-50%)' }
+                  : { left: '50%', transform: 'translateX(-50%)' }),
               }}
               data-nodeid={id}
               data-handleid="source"
@@ -404,15 +408,15 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
                 position={horizontalHandles ? Position.Right : Position.Bottom}
                 id="error"
                 className={cn(
-                  '!w-[7px] !h-5',
+                  horizontalHandles ? '!w-[7px] !h-5' : '!w-5 !h-[7px]',
                   '!bg-red-400 dark:!bg-red-500 !rounded-[2px] !border-none',
                   '!z-[30]',
                   'group-hover:!shadow-[0_0_0_3px_rgba(248,113,113,0.15)]',
                   horizontalHandles
                     ? 'hover:!w-[10px] hover:!right-[-10px] hover:!rounded-r-full hover:!rounded-l-none'
-                    : 'hover:!h-[10px] hover:!translate-y-[3px] hover:!rounded-b-full hover:!rounded-t-none',
+                    : 'hover:!h-[10px] hover:!bottom-[-10px] hover:!rounded-b-full hover:!rounded-t-none',
                   '!cursor-crosshair',
-                  'transition-all duration-150'
+                  'transition-[colors] duration-150'
                 )}
                 style={{
                   position: 'absolute',