Fix pin button hover flickering when node layout shifts

When hovering the pin button to preview probability root, the node
shows 100% probability (3 digits instead of 2), which can widen the
probability badge, cause text wrapping, and make the node taller.
This pushes the pin button upward, and if the cursor is at the
button's bottom edge, it moves away causing hover to end, which
reverts the layout, creating an infinite flashing loop.

Solution: Add a conditional extended hover zone that activates only
during hover. When isPinHovered is true, a 10px transparent padding
zone extends below the button, keeping the cursor within the hover
area even when the button shifts upward.

Changes:
- Add isPinHovered state to track pin button hover
- Wrap both pin button instances in divs with conditional padding
- Move hover handlers to wrapper divs to control extended zone
- Update button background to stay orange during hover

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: lucbrinkman

components/Node.tsx

@@ -128,6 +128,9 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
     // Pin button click cooldown - prevents hover preview immediately after clicking
     const pinClickCooldownRef = useRef(false);
 
+    // Pin button hover state - controls extended hover zone to prevent flickering
+    const [isPinHovered, setIsPinHovered] = useState(false);
+
     // Edit state
     const [isEditing, setIsEditing] = useState(false);
     const [editText, setEditText] = useState(text);
@@ -642,46 +645,45 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
           >
             {/* Pin button (left) */}
             {onSetProbabilityRoot && (
-              <Tooltip
-                content={isSelected ? "Remove as start" : "Set as start"}
-                position="top"
+              <div
+                onMouseEnter={(e) => {
+                  e.stopPropagation();
+                  if (!pinClickCooldownRef.current) {
+                    setIsPinHovered(true);
+                    onSetProbabilityRootHoverStart?.();
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  e.stopPropagation();
+                  setIsPinHovered(false);
+                  pinClickCooldownRef.current = false; // Reset cooldown when mouse leaves
+                  onSetProbabilityRootHoverEnd?.();
+                }}
+                style={{
+                  paddingBottom: isPinHovered ? "10px" : "0",
+                }}
               >
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    pinClickCooldownRef.current = true;
-                    onSetProbabilityRootHoverEnd?.(); // Clear any existing hover
-                    onSetProbabilityRoot();
-                  }}
-                  onMouseEnter={(e) => {
-                    e.stopPropagation();
-                    if (!pinClickCooldownRef.current) {
-                      onSetProbabilityRootHoverStart?.();
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    e.stopPropagation();
-                    pinClickCooldownRef.current = false; // Reset cooldown when mouse leaves
-                    onSetProbabilityRootHoverEnd?.();
-                  }}
-                  className="text-white rounded w-5 h-5 flex items-center justify-center shadow-lg transition-colors"
-                  style={{
-                    backgroundColor: isSelected ? ORANGE_COLOR : "#9ca3af",
-                  }}
-                  onMouseOver={(e) => {
-                    if (!pinClickCooldownRef.current) {
-                      e.currentTarget.style.backgroundColor = ORANGE_COLOR;
-                    }
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.backgroundColor = isSelected
-                      ? ORANGE_COLOR
-                      : "#9ca3af";
-                  }}
+                <Tooltip
+                  content={isSelected ? "Remove as start" : "Set as start"}
+                  position="top"
                 >
-                  <Pin size={14} />
-                </button>
-              </Tooltip>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      pinClickCooldownRef.current = true;
+                      onSetProbabilityRootHoverEnd?.(); // Clear any existing hover
+                      onSetProbabilityRoot();
+                    }}
+                    className="text-white rounded w-5 h-5 flex items-center justify-center shadow-lg transition-colors"
+                    style={{
+                      backgroundColor:
+                        isPinHovered || isSelected ? ORANGE_COLOR : "#9ca3af",
+                    }}
+                  >
+                    <Pin size={14} />
+                  </button>
+                </Tooltip>
+              </div>
             )}
 
             {/* Trash button (right) */}
@@ -713,33 +715,41 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
                 right: `${-borderWidth}px`,
               }}
             >
-              <Tooltip content="Remove as start" position="top">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    pinClickCooldownRef.current = true;
-                    onSetProbabilityRootHoverEnd?.(); // Clear hover state before toggling
-                    onSetProbabilityRoot();
-                  }}
-                  onMouseEnter={(e) => {
-                    e.stopPropagation();
-                    if (!pinClickCooldownRef.current) {
-                      onSetProbabilityRootHoverStart?.();
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    e.stopPropagation();
-                    pinClickCooldownRef.current = false; // Reset cooldown when mouse leaves
-                    onSetProbabilityRootHoverEnd?.();
-                  }}
-                  className="text-white rounded w-5 h-5 flex items-center justify-center shadow-lg transition-colors"
-                  style={{
-                    backgroundColor: ORANGE_COLOR,
-                  }}
-                >
-                  <Pin size={14} />
-                </button>
-              </Tooltip>
+              <div
+                onMouseEnter={(e) => {
+                  e.stopPropagation();
+                  if (!pinClickCooldownRef.current) {
+                    setIsPinHovered(true);
+                    onSetProbabilityRootHoverStart?.();
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  e.stopPropagation();
+                  setIsPinHovered(false);
+                  pinClickCooldownRef.current = false; // Reset cooldown when mouse leaves
+                  onSetProbabilityRootHoverEnd?.();
+                }}
+                style={{
+                  paddingBottom: isPinHovered ? "10px" : "0",
+                }}
+              >
+                <Tooltip content="Remove as start" position="top">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      pinClickCooldownRef.current = true;
+                      onSetProbabilityRootHoverEnd?.(); // Clear hover state before toggling
+                      onSetProbabilityRoot();
+                    }}
+                    className="text-white rounded w-5 h-5 flex items-center justify-center shadow-lg transition-colors"
+                    style={{
+                      backgroundColor: ORANGE_COLOR,
+                    }}
+                  >
+                    <Pin size={14} />
+                  </button>
+                </Tooltip>
+              </div>
             </div>
           )}