Browse Source

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>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
88e5168023
  1. 2
      src/components/nodes/BaseNode.tsx
  2. 1
      src/components/nodes/Generate3DNode.tsx
  3. 1
      src/components/nodes/GenerateAudioNode.tsx
  4. 1
      src/components/nodes/GenerateImageNode.tsx
  5. 1
      src/components/nodes/GenerateVideoNode.tsx
  6. 10
      src/components/nodes/InlineParameterPanel.tsx
  7. 1
      src/components/nodes/LLMGenerateNode.tsx

2
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" : "")}

1
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">

1
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">

1
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 && (

1
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) && (

10
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"

1
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">

Loading…
Cancel
Save