From fff98915f5e716348676da5f2f36c3cc4449c480 Mon Sep 17 00:00:00 2001
From: naweiss <naweiss@g.jct.ac.il>
Date: Mon, 11 May 2026 08:41:51 +0300
Subject: [PATCH] Fix wire hovering in desktop mode

---
 .../components/simulator/SimulatorCanvas.tsx  | 96 +++++++++++--------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/simulator/SimulatorCanvas.tsx b/frontend/src/components/simulator/SimulatorCanvas.tsx
index b6183562..aea027b5 100644
--- a/frontend/src/components/simulator/SimulatorCanvas.tsx
+++ b/frontend/src/components/simulator/SimulatorCanvas.tsx
@@ -1757,26 +1757,35 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => {
         !dialogOpen && !isTouchDevice && (wireInProgress || isSelected || isHovered);
       return (
         <React.Fragment key={component.id}>
-          <InstrumentComponent
-            id={component.id}
-            metadataId={component.metadataId}
-            x={component.x}
-            y={component.y}
-            isSelected={isSelected}
-            onMouseDown={(e) => handleComponentMouseDown(component.id, e)}
-          />
-          {!running && (
-            <PinOverlay
-              componentId={component.id}
-              componentX={component.x}
-              componentY={component.y}
-              onPinClick={handlePinClick}
-              showPins={showPinsForComponent}
-              zoom={zoom}
-              wrapperOffsetX={0}
-              wrapperOffsetY={0}
+          <div
+            className="component-interactive-group"
+            onMouseEnter={() => setHoveredComponentId(component.id)}
+            onMouseLeave={() =>
+              setHoveredComponentId((curr) => (curr === component.id ? null : curr))
+            }
+            style={{ display: 'contents' }}
+          >
+            <InstrumentComponent
+              id={component.id}
+              metadataId={component.metadataId}
+              x={component.x}
+              y={component.y}
+              isSelected={isSelected}
+              onMouseDown={(e) => handleComponentMouseDown(component.id, e)}
             />
-          )}
+            {!running && (
+              <PinOverlay
+                componentId={component.id}
+                componentX={component.x}
+                componentY={component.y}
+                onPinClick={handlePinClick}
+                showPins={showPinsForComponent}
+                zoom={zoom}
+                wrapperOffsetX={0}
+                wrapperOffsetY={0}
+              />
+            )}
+          </div>
         </React.Fragment>
       );
     }
@@ -1800,33 +1809,38 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => {
 
     return (
       <React.Fragment key={component.id}>
-        <DynamicComponent
-          id={component.id}
-          metadata={metadata}
-          properties={component.properties}
-          x={component.x}
-          y={component.y}
-          isSelected={isSelected}
-          onMouseDown={(e) => {
-            handleComponentMouseDown(component.id, e);
-          }}
+        <div
+          className="component-interactive-group"
           onMouseEnter={() => setHoveredComponentId(component.id)}
           onMouseLeave={() =>
             setHoveredComponentId((curr) => (curr === component.id ? null : curr))
           }
-        />
-
-        {/* Pin overlay for wire creation - hide when running */}
-        {!running && (
-          <PinOverlay
-            componentId={component.id}
-            componentX={component.x}
-            componentY={component.y}
-            onPinClick={handlePinClick}
-            showPins={showPinsForComponent}
-            zoom={zoom}
+          style={{ display: 'contents' }}
+        >
+          <DynamicComponent
+            id={component.id}
+            metadata={metadata}
+            properties={component.properties}
+            x={component.x}
+            y={component.y}
+            isSelected={isSelected}
+            onMouseDown={(e) => {
+              handleComponentMouseDown(component.id, e);
+            }}
           />
-        )}
+
+          {/* Pin overlay for wire creation - hide when running */}
+          {!running && (
+            <PinOverlay
+              componentId={component.id}
+              componentX={component.x}
+              componentY={component.y}
+              onPinClick={handlePinClick}
+              showPins={showPinsForComponent}
+              zoom={zoom}
+            />
+          )}
+        </div>
       </React.Fragment>
     );
   };