From 8b8a5179ec4e3f754ac3fa0954e657cf5501e084 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Fri, 17 Apr 2026 13:31:44 -0600
Subject: [PATCH] fix(chess): lift dragged piece above all other pieces

The piece`s own z-index could only stack within its grid cell`s context,
so when translated over neighbouring cells it rendered underneath their
pieces. Promote the hosting cell to z-50 while it holds the dragged
piece so the whole cell (and piece inside) float above the board.
---
 packages/chess/src/ui/Board.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/chess/src/ui/Board.tsx b/packages/chess/src/ui/Board.tsx
index 1bba8b3..bc722ff 100644
--- a/packages/chess/src/ui/Board.tsx
+++ b/packages/chess/src/ui/Board.tsx
@@ -125,14 +125,20 @@ export function Board({ facts, legalMoves, onMove, turn, lastMove, checkedKingSq
       const isCheckedKing = checkedKingSquare === sq;
       
       const piece = pieces.get(sq);
-      
+      // While this cell hosts the actively-dragged piece, lift the whole
+      // cell above all siblings in the grid. Z-index inside the <Piece>
+      // component can only stack within its own cell's stacking context,
+      // so the piece would render *under* neighbouring cells' pieces when
+      // translated over them. Promoting the cell itself fixes that.
+      const isHostingDragged = draggedPiece?.square === sq;
+
       squares.push(
         <div 
           key={sq}
           data-square={algebraic}
           className={`relative aspect-square flex items-center justify-center ${
             isDark ? 'bg-[#B58863]' : 'bg-[#F0D9B5]'
-          } shadow-[inset_0_0_8px_rgba(0,0,0,0.15)]`}
+          } shadow-[inset_0_0_8px_rgba(0,0,0,0.15)] ${isHostingDragged ? 'z-50' : ''}`}
           onDragOver={(e) => handleDragOver(e, sq)}
           onDrop={(e) => handleDrop(e, sq)}
         >