From 259c2a39abb268075049732214bdddd76150d60f Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 2 Apr 2026 05:41:43 +1300
Subject: [PATCH] fix: move batch and auto-route buttons inline with split row

Removes the absolute-positioned header div and places the buttons
in the same flex row as the Split select, preventing overlap at
narrow widths and ensuring vertical alignment.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/nodes/ArrayNode.tsx | 67 ++++++++++++++----------------
 1 file changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/components/nodes/ArrayNode.tsx b/src/components/nodes/ArrayNode.tsx
index fc4ddd35..669bfea7 100644
--- a/src/components/nodes/ArrayNode.tsx
+++ b/src/components/nodes/ArrayNode.tsx
@@ -226,43 +226,8 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
       {/* Single text output point (each outgoing edge receives a separate item) */}
       <Handle type="source" position={Position.Right} id="text" data-handletype="text" style={{ top: 48 }} />
 
-      {/* Header buttons - floating absolute positioned */}
-      <div className="absolute top-2 right-2 z-10 flex items-center gap-1">
-        {/* Batch mode toggle */}
-        <button
-          type="button"
-          onClick={() => updateNodeData(id, { batchMode: !nodeData.batchMode })}
-          className={`nodrag nopan shrink-0 py-1 px-2 rounded-md text-[11px] font-medium transition-colors ${
-            nodeData.batchMode
-              ? "bg-blue-600/80 text-blue-100"
-              : "bg-[#1a1a1a] text-neutral-500 hover:text-neutral-300"
-          }`}
-          title={nodeData.batchMode ? "Batch mode: all items sent to one downstream node" : "Enable batch mode"}
-        >
-          Batch
-        </button>
-
-        {/* Auto-route button (hidden in batch mode) */}
-        {!nodeData.batchMode && (
-          <button
-            type="button"
-            onClick={handleAutoRouteToPrompts}
-            disabled={previewItems.length === 0}
-            className="nodrag nopan shrink-0 py-1 px-2 bg-[#1a1a1a] rounded-md text-neutral-400 hover:text-neutral-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            title="Auto-route to Prompts"
-          >
-            <svg className="w-3.5 h-3.5 rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
-              <path d="M16 3h5v5" />
-              <path d="M8 3H3v5" />
-              <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" />
-              <path d="m15 9 6-6" />
-            </svg>
-          </button>
-        )}
-      </div>
-
       <div className="flex flex-col gap-2 pt-3 flex-1 min-h-0">
-        <div className="flex items-center gap-2 max-w-[75%]">
+        <div className="flex items-center gap-2">
           <label className="shrink-0 text-[11px] text-neutral-400">Split</label>
           <select
             value={nodeData.splitMode}
@@ -273,6 +238,36 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
             <option value="newline">Newline</option>
             <option value="regex">Regex (Advanced)</option>
           </select>
+          {/* Batch mode toggle */}
+          <button
+            type="button"
+            onClick={() => updateNodeData(id, { batchMode: !nodeData.batchMode })}
+            className={`nodrag nopan shrink-0 py-1 px-2 rounded-md text-[11px] font-medium transition-colors ${
+              nodeData.batchMode
+                ? "bg-blue-600/80 text-blue-100"
+                : "bg-[#1a1a1a] text-neutral-500 hover:text-neutral-300"
+            }`}
+            title={nodeData.batchMode ? "Batch mode: all items sent to one downstream node" : "Enable batch mode"}
+          >
+            Batch
+          </button>
+          {/* Auto-route button (hidden in batch mode) */}
+          {!nodeData.batchMode && (
+            <button
+              type="button"
+              onClick={handleAutoRouteToPrompts}
+              disabled={previewItems.length === 0}
+              className="nodrag nopan shrink-0 py-1 px-1.5 bg-[#1a1a1a] rounded-md text-neutral-400 hover:text-neutral-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Auto-route to Prompts"
+            >
+              <svg className="w-3.5 h-3.5 rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+                <path d="M16 3h5v5" />
+                <path d="M8 3H3v5" />
+                <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" />
+                <path d="m15 9 6-6" />
+              </svg>
+            </button>
+          )}
         </div>
 
         {nodeData.splitMode === "delimiter" && (