From 88e5168023c3026a09454f7fc43067bd3bb149f2 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 9 Mar 2026 21:26:51 +1300
Subject: [PATCH] fix(47-02): seamless selection ring using overlap instead of
 min-h-full

Revert min-h-full back to h-full (which broke preview layout). Instead,
InlineParameterPanel uses -mt-[3px] negative margin when expanded+selected
to overlap with BaseNode's ring bottom edge, creating a seamless continuous
blue outline around both preview and settings areas.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/BaseNode.tsx             |  2 +-
 src/components/nodes/Generate3DNode.tsx       |  1 +
 src/components/nodes/GenerateAudioNode.tsx    |  1 +
 src/components/nodes/GenerateImageNode.tsx    |  1 +
 src/components/nodes/GenerateVideoNode.tsx    |  1 +
 src/components/nodes/InlineParameterPanel.tsx | 10 +++++++++-
 src/components/nodes/LLMGenerateNode.tsx      |  1 +
 7 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/nodes/BaseNode.tsx b/src/components/nodes/BaseNode.tsx
index e1426075..4160d480 100644
--- a/src/components/nodes/BaseNode.tsx
+++ b/src/components/nodes/BaseNode.tsx
@@ -126,7 +126,7 @@ export function BaseNode({
       />
       <div
         className={`
-          min-h-full w-full flex flex-col overflow-visible
+          h-full w-full flex flex-col overflow-visible
           ${fullBleed ? "rounded-lg bg-neutral-800/50 border border-neutral-700/40" : "bg-neutral-800 rounded-lg shadow-lg border"}
           ${fullBleed ? "" : (isCurrentlyExecuting || isExecuting ? "border-blue-500 ring-1 ring-blue-500/20" : "border-neutral-700/60")}
           ${fullBleed ? "" : (hasError ? "border-red-500" : "")}
diff --git a/src/components/nodes/Generate3DNode.tsx b/src/components/nodes/Generate3DNode.tsx
index a4d3f517..37af8b1e 100644
--- a/src/components/nodes/Generate3DNode.tsx
+++ b/src/components/nodes/Generate3DNode.tsx
@@ -430,6 +430,7 @@ export function Generate3DNode({ id, data, selected }: NodeProps<Generate3DNodeT
             expanded={isParamsExpanded}
             onToggle={handleToggleParams}
             nodeId={id}
+            selected={selected}
           >
             {/* Model selector: Browse button + current model display */}
             <div className="flex items-center justify-between gap-2">
diff --git a/src/components/nodes/GenerateAudioNode.tsx b/src/components/nodes/GenerateAudioNode.tsx
index 632518af..15e5236b 100644
--- a/src/components/nodes/GenerateAudioNode.tsx
+++ b/src/components/nodes/GenerateAudioNode.tsx
@@ -390,6 +390,7 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
             expanded={isParamsExpanded}
             onToggle={handleToggleParams}
             nodeId={id}
+            selected={selected}
           >
             {/* Model selector: Browse button + current model display */}
             <div className="flex items-center justify-between gap-2">
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 24992770..8950b669 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -757,6 +757,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
           expanded={isParamsExpanded}
           onToggle={handleToggleParams}
           nodeId={id}
+          selected={selected}
         >
           {/* Gemini-specific controls */}
           {isGeminiProvider && currentModelId && (
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index d1d8a5eb..106d050f 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -820,6 +820,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
           expanded={isParamsExpanded}
           onToggle={handleToggleParams}
           nodeId={id}
+          selected={selected}
         >
           {/* External provider parameters - reuse ModelParameters component */}
           {nodeData.selectedModel?.modelId && !isVeoModel(nodeData.selectedModel.modelId) && (
diff --git a/src/components/nodes/InlineParameterPanel.tsx b/src/components/nodes/InlineParameterPanel.tsx
index 60e29bbf..fc2e3b3d 100644
--- a/src/components/nodes/InlineParameterPanel.tsx
+++ b/src/components/nodes/InlineParameterPanel.tsx
@@ -7,6 +7,7 @@ interface InlineParameterPanelProps {
   onToggle: () => void;
   children: ReactNode;
   nodeId: string;
+  selected?: boolean;
 }
 
 /**
@@ -18,9 +19,16 @@ export function InlineParameterPanel({
   onToggle,
   children,
   nodeId,
+  selected = false,
 }: InlineParameterPanelProps) {
+  // When expanded + selected, overlap with BaseNode ring using negative margin
+  // so the two rings merge into one continuous outline
+  const ringClass = expanded && selected
+    ? "ring-2 ring-blue-500/40 rounded-b-lg -mt-[3px] pt-[3px]"
+    : "";
+
   return (
-    <div className="w-full">
+    <div className={`w-full ${ringClass}`}>
       {/* Settings toggle button — no background when collapsed, floats below node edge */}
       <button
         type="button"
diff --git a/src/components/nodes/LLMGenerateNode.tsx b/src/components/nodes/LLMGenerateNode.tsx
index 7d9b6f32..60083db0 100644
--- a/src/components/nodes/LLMGenerateNode.tsx
+++ b/src/components/nodes/LLMGenerateNode.tsx
@@ -243,6 +243,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
           expanded={isParamsExpanded}
           onToggle={handleToggleParams}
           nodeId={id}
+          selected={selected}
         >
           {/* LLM-specific controls */}
           <div className="space-y-1.5">