fix(workflow): align condition/router handles with their rows

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx

@@ -146,7 +146,7 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <div className='flex items-center gap-2'>
+    <div className='flex h-5 items-center gap-2'>
       <span
         className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
         title={title}

packages/workflow-renderer/src/dimensions.ts

@@ -31,17 +31,21 @@ export const CONTAINER_DIMENSIONS = {
 } as const
 
 /**
- * Handle position constants - must match CSS in workflow-block.tsx and subflow-node.tsx
+ * Handle position constants - must match CSS in workflow-block-view.tsx,
+ * sub-block-row-view.tsx, and subflow-node.tsx
  */
 export const HANDLE_POSITIONS = {
   /** Default Y offset from block top for source/target handles */
   DEFAULT_Y_OFFSET: 20,
   /** Error handle offset from block bottom */
   ERROR_BOTTOM_OFFSET: 17,
-  /** Condition handle starting Y offset */
-  CONDITION_START_Y: 60,
-  /** Height per condition row */
-  CONDITION_ROW_HEIGHT: 29,
+  /**
+   * Y of the first condition-row handle: 40px header + 1px divider +
+   * 8px content padding + half of the 20px row
+   */
+  CONDITION_START_Y: 59,
+  /** Row pitch: 20px row height (h-5) + 8px flex gap (gap-2) */
+  CONDITION_ROW_HEIGHT: 28,
   /** Subflow start handle Y offset (header 50px + pill offset 16px + pill center 14px) */
   SUBFLOW_START_Y_OFFSET: 80,
 } as const

packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx

@@ -19,10 +19,15 @@ export interface SubBlockRowViewProps {
 /**
  * Pure renderer for a collapsed block's subblock summary row: a capitalized
  * title and its resolved display value.
+ *
+ * The fixed `h-5` row height is part of the handle-position contract —
+ * `HANDLE_POSITIONS.CONDITION_ROW_HEIGHT` in dimensions.ts assumes a 20px row
+ * plus the container's 8px gap, so condition/router source handles align with
+ * their rows.
  */
 export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRowViewProps) {
   return (
-    <div className='flex items-center gap-2'>
+    <div className='flex h-5 items-center gap-2'>
       <OverflowSpan
         value={title}
         className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'