Browse Source

fix: improve EaseCurveNode UI spacing and layout consistency

Use fixed-width editor, absolute-positioned video to fill node, and
uniform gap-based spacing for controls below the curve editor.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 5 months ago
parent
commit
2da0fbbe8d
  1. 28
      src/components/nodes/EaseCurveNode.tsx

28
src/components/nodes/EaseCurveNode.tsx

@ -369,21 +369,23 @@ export function EaseCurveNode({ id, data, selected }: NodeProps<EaseCurveNodeTyp
{activeTab === "editor" && ( {activeTab === "editor" && (
<div className="flex-1 flex flex-col min-h-0 gap-2 relative"> <div className="flex-1 flex flex-col min-h-0 gap-2 relative">
{/* Editor controls - dimmed when inherited */} {/* Editor controls - dimmed when inherited */}
<div className={isInherited ? "pointer-events-none opacity-40" : ""}> <div className={`flex flex-col gap-2 ${isInherited ? "pointer-events-none opacity-40" : ""}`}>
{/* Bezier curve editor - fills available width */} {/* Bezier curve editor - fixed size, centered */}
<div className="flex-1 min-h-0 px-2"> <div className="flex justify-center">
<CubicBezierEditor <div className="w-60">
value={nodeData.bezierHandles} <CubicBezierEditor
onChange={handleBezierChange} value={nodeData.bezierHandles}
onCommit={handleBezierCommit} onChange={handleBezierChange}
disabled={nodeData.status === "loading" || isInherited} onCommit={handleBezierCommit}
easingCurve={editorEasingCurve} disabled={nodeData.status === "loading" || isInherited}
/> easingCurve={editorEasingCurve}
/>
</div>
</div> </div>
{/* Preset label */} {/* Preset label */}
{nodeData.easingPreset && ( {nodeData.easingPreset && (
<div className="text-center -mt-1"> <div className="text-center">
<span className="text-[10px] text-lime-300/70 font-medium"> <span className="text-[10px] text-lime-300/70 font-medium">
{nodeData.easingPreset} {nodeData.easingPreset}
</span> </span>
@ -509,7 +511,7 @@ export function EaseCurveNode({ id, data, selected }: NodeProps<EaseCurveNodeTyp
</div> </div>
{/* Apply button */} {/* Apply button */}
<div className="px-2 pb-1"> <div className="px-2">
<button <button
className="nodrag nopan px-3 py-1.5 bg-lime-300/15 hover:bg-lime-300/25 border border-lime-300/30 rounded text-xs text-lime-300 font-medium transition-colors disabled:opacity-40 disabled:pointer-events-none" className="nodrag nopan px-3 py-1.5 bg-lime-300/15 hover:bg-lime-300/25 border border-lime-300/30 rounded text-xs text-lime-300 font-medium transition-colors disabled:opacity-40 disabled:pointer-events-none"
onClick={handleRun} onClick={handleRun}
@ -546,7 +548,7 @@ export function EaseCurveNode({ id, data, selected }: NodeProps<EaseCurveNodeTyp
autoPlay autoPlay
loop loop
muted muted
className="w-full h-full max-h-[260px] object-contain rounded" className="absolute inset-0 w-full h-full object-contain rounded"
playsInline playsInline
/> />
<button <button

Loading…
Cancel
Save