From 1e6b7efddc58feffeec60d1a423e356b1e6cd074 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Mon, 27 Jul 2026 18:03:43 +0200
Subject: [PATCH] fix(canvas): las placas pintan por encima de los componentes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Estaban a zIndex 0 con los componentes a 1: cualquier solape las escondia. El
caso que lo decide es el apilado — una XIAO posada en el zocalo del Round
Display debe ser lo que se ve, como la placa recien soltada queda arriba del
monton. Los montajes lado a lado no solapan, asi que nada mas cambia.
---
 frontend/src/components/simulator/BoardOnCanvas.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/simulator/BoardOnCanvas.tsx b/frontend/src/components/simulator/BoardOnCanvas.tsx
index 3181369d..75841ec6 100644
--- a/frontend/src/components/simulator/BoardOnCanvas.tsx
+++ b/frontend/src/components/simulator/BoardOnCanvas.tsx
@@ -184,7 +184,12 @@ export const BoardOnCanvas = ({
     // 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 }}
+      // Boards paint ABOVE components (which sit at zIndex 1, 2 selected).
+      // The case that decides it is stacking: a XIAO seated on the Round
+      // Display's socket must be the thing you see, the way the board you
+      // just dropped is the thing on top of the pile. Side-by-side layouts
+      // never overlap, so nothing else changes.
+      style={{ position: 'absolute', left: 0, top: 0, zIndex: 3 }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >