From f6dec9ace2466e16965d3f2240ab6b15bc731021 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Fri, 17 Jul 2026 20:23:35 +0200
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20board=20pins=20stay=20clickable?=
 =?UTF-8?q?=20=E2=80=94=20hover=20handlers=20on=20the=20wrapper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removing isActive from board showPins (prev commit) exposed a latent bug:
BoardOnCanvas put onMouseEnter/onMouseLeave on the drag overlay, a SIBLING
of PinOverlay. Moving the cursor from the overlay onto a pin square fired
the overlay's mouseleave, cleared hoveredBoardId, and hid every pin right
as you reached one — so a board pin could never be clicked to start a wire
(breadboards were fine: their group wrapper owns both body and pins).

Move the hover handlers to the wrapper div that contains the board body,
the drag overlay AND the pin squares, so moving among them never fires
mouseleave. Board dragging (onMouseDown on the overlay) is unaffected.
---
 frontend/src/components/simulator/BoardOnCanvas.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/simulator/BoardOnCanvas.tsx b/frontend/src/components/simulator/BoardOnCanvas.tsx
index db040eb7..25d8fd7d 100644
--- a/frontend/src/components/simulator/BoardOnCanvas.tsx
+++ b/frontend/src/components/simulator/BoardOnCanvas.tsx
@@ -166,7 +166,15 @@ export const BoardOnCanvas = ({
     // coords, but board + pins now share ONE stacking context, so this
     // board's pins can never paint above a component/board covering it.
     // z 0 keeps every board below components (their groups use z 1/2).
-    <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}>
+    // Hover handlers live HERE, on the wrapper that owns both the drag
+    // overlay AND the pin squares — putting them on the drag overlay (a
+    // sibling of PinOverlay) made moving onto a pin fire mouseleave, which
+    // cleared the hover and hid the pins before you could click one.
+    <div
+      style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
       {boardEl}
 
       {/* Active board highlight ring */}
@@ -223,8 +231,6 @@ export const BoardOnCanvas = ({
             onMouseDown(e);
           }}
           onContextMenu={onContextMenu}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
         />
       )}