From 8e447628383adf440a69c9b04be39bad0ef5d4a2 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 9 Mar 2026 08:16:29 +1300
Subject: [PATCH] fix(47-02): polish inline parameter panel visuals

Center max-width container, clip rounded bottom corners, improve
chevron visibility with subtle background, remove duplicate model
selector from image/video nodes (already in FloatingNodeHeader),
and unify control sizing across Gemini and LLM selects.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/GenerateImageNode.tsx    | 28 ++++---------------
 src/components/nodes/GenerateVideoNode.tsx    | 18 ------------
 src/components/nodes/InlineParameterPanel.tsx |  8 +++---
 src/components/nodes/LLMGenerateNode.tsx      |  4 +--
 4 files changed, 11 insertions(+), 47 deletions(-)

diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 13eab26c..7b6e3e05 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -758,24 +758,6 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
           onToggle={handleToggleParams}
           nodeId={id}
         >
-          {/* Model selector: Browse button + current model display */}
-          <div className="flex items-center justify-between gap-2">
-            <div className="flex-1 min-w-0">
-              <div className="text-[11px] text-neutral-200 truncate">
-                {displayTitle}
-              </div>
-              <div className="text-[9px] text-neutral-500">
-                {enabledProviders.find(p => p.id === currentProvider)?.name || currentProvider}
-              </div>
-            </div>
-            <button
-              onClick={() => setIsBrowseDialogOpen(true)}
-              className="nodrag nopan shrink-0 px-2 py-1 text-[10px] bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 transition-colors"
-            >
-              Browse
-            </button>
-          </div>
-
           {/* Gemini-specific controls - unified styling to match ModelParameters */}
           {isGeminiProvider && currentModelId && (
             <div className="space-y-1.5">
@@ -785,7 +767,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
                 <select
                   value={currentModelId}
                   onChange={handleModelChange}
-                  className="nodrag nopan w-full text-[10px] py-0.5 px-1.5 bg-neutral-800/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
+                  className="nodrag nopan w-full text-[9px] py-0.5 px-1 bg-neutral-900/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
                 >
                   {GEMINI_IMAGE_MODELS.map((m) => (
                     <option key={m.value} value={m.value}>
@@ -801,7 +783,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
                 <select
                   value={nodeData.aspectRatio || "1:1"}
                   onChange={handleAspectRatioChange}
-                  className="nodrag nopan w-full text-[10px] py-0.5 px-1.5 bg-neutral-800/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
+                  className="nodrag nopan w-full text-[9px] py-0.5 px-1 bg-neutral-900/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
                 >
                   {aspectRatios.map((ratio) => (
                     <option key={ratio} value={ratio}>
@@ -818,7 +800,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
                   <select
                     value={nodeData.resolution || "2K"}
                     onChange={handleResolutionChange}
-                    className="nodrag nopan w-full text-[10px] py-0.5 px-1.5 bg-neutral-800/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
+                    className="nodrag nopan w-full text-[9px] py-0.5 px-1 bg-neutral-900/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
                   >
                     {resolutions.map((res) => (
                       <option key={res} value={res}>
@@ -831,7 +813,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
 
               {/* Google Search toggle */}
               {(currentModelId === "nano-banana-pro" || currentModelId === "nano-banana-2") && (
-                <label className="flex items-center gap-1.5 text-[10px] text-neutral-300 cursor-pointer">
+                <label className="flex items-center gap-1.5 text-[9px] text-neutral-300 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={nodeData.useGoogleSearch || false}
@@ -844,7 +826,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
 
               {/* Image Search toggle (NB2 only) */}
               {currentModelId === "nano-banana-2" && (
-                <label className="flex items-center gap-1.5 text-[10px] text-neutral-300 cursor-pointer">
+                <label className="flex items-center gap-1.5 text-[9px] text-neutral-300 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={nodeData.useImageSearch || false}
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index b27f3afa..ce958f72 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -821,24 +821,6 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
           onToggle={handleToggleParams}
           nodeId={id}
         >
-          {/* Model selector: Browse button + current model display */}
-          <div className="flex items-center justify-between gap-2">
-            <div className="flex-1 min-w-0">
-              <div className="text-[11px] text-neutral-200 truncate">
-                {displayTitle}
-              </div>
-              <div className="text-[9px] text-neutral-500">
-                {enabledProviders.find(p => p.id === currentProvider)?.name || currentProvider}
-              </div>
-            </div>
-            <button
-              onClick={() => setIsBrowseDialogOpen(true)}
-              className="nodrag nopan shrink-0 px-2 py-1 text-[10px] bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 transition-colors"
-            >
-              Browse
-            </button>
-          </div>
-
           {/* External provider parameters - reuse ModelParameters component */}
           {nodeData.selectedModel?.modelId && !isVeoModel(nodeData.selectedModel.modelId) && (
             <ModelParameters
diff --git a/src/components/nodes/InlineParameterPanel.tsx b/src/components/nodes/InlineParameterPanel.tsx
index e28a4650..95340bda 100644
--- a/src/components/nodes/InlineParameterPanel.tsx
+++ b/src/components/nodes/InlineParameterPanel.tsx
@@ -25,13 +25,13 @@ export function InlineParameterPanel({
       <button
         type="button"
         onClick={onToggle}
-        className="nodrag nopan w-full flex items-center justify-center py-1 text-neutral-500 hover:text-neutral-300 transition-colors"
+        className="nodrag nopan w-full flex items-center justify-center py-1.5 bg-neutral-800/80 text-neutral-400 hover:text-neutral-200 transition-colors"
         aria-label={expanded ? "Collapse parameters" : "Expand parameters"}
         aria-expanded={expanded}
         aria-controls={`params-${nodeId}`}
       >
         <svg
-          className="w-4 h-4 transition-transform duration-200"
+          className="w-3.5 h-3.5 transition-transform duration-200"
           style={{ transform: expanded ? "rotate(180deg)" : "rotate(0deg)" }}
           viewBox="0 0 24 24"
           fill="none"
@@ -53,8 +53,8 @@ export function InlineParameterPanel({
           opacity: expanded ? 1 : 0,
         }}
       >
-        <div className="nodrag nopan nowheel bg-neutral-900 px-3 pb-3">
-          <div className="space-y-2 max-w-[280px]">{children}</div>
+        <div className="nodrag nopan nowheel bg-neutral-900 px-3 pt-2 pb-3 rounded-b-lg">
+          <div className="space-y-2 max-w-[280px] mx-auto">{children}</div>
         </div>
       </div>
     </div>
diff --git a/src/components/nodes/LLMGenerateNode.tsx b/src/components/nodes/LLMGenerateNode.tsx
index e9bb0b80..528d89c9 100644
--- a/src/components/nodes/LLMGenerateNode.tsx
+++ b/src/components/nodes/LLMGenerateNode.tsx
@@ -252,7 +252,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
               <select
                 value={provider}
                 onChange={handleProviderChange}
-                className="nodrag nopan w-full text-[10px] py-0.5 px-1.5 bg-neutral-800/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
+                className="nodrag nopan w-full text-[9px] py-0.5 px-1 bg-neutral-900/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
               >
                 {LLM_PROVIDERS.map(p => (
                   <option key={p.value} value={p.value}>{p.label}</option>
@@ -266,7 +266,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
               <select
                 value={nodeData.model || availableModels[0].value}
                 onChange={handleModelChange}
-                className="nodrag nopan w-full text-[10px] py-0.5 px-1.5 bg-neutral-800/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
+                className="nodrag nopan w-full text-[9px] py-0.5 px-1 bg-neutral-900/50 border border-neutral-700 rounded focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
               >
                 {availableModels.map(m => (
                   <option key={m.value} value={m.value}>{m.label}</option>