From 9961596edd58c54835dfde06a772fc303f149e2e Mon Sep 17 00:00:00 2001
From: kiannidev <156195510+kiannidev@users.noreply.github.com>
Date: Thu, 18 Jun 2026 02:00:49 +0200
Subject: [PATCH] fix(client): render land undo above phase HUD overlay

The undo control sat at the bottom of the lands column (z-10) while the
player HUD band uses z-20, blocking clicks. Render it as a z-30 overlay
anchored to the middle row instead.

Fixes #3276

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/components/board/PlayerArea.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/board/PlayerArea.tsx b/client/src/components/board/PlayerArea.tsx
index 4576bc1664..6cc52f86d0 100644
--- a/client/src/components/board/PlayerArea.tsx
+++ b/client/src/components/board/PlayerArea.tsx
@@ -280,7 +280,6 @@ export function PlayerArea({
             side="left"
             className="justify-start px-0"
           />
-          {landColumnExtra}
         </>
       ),
     },
@@ -411,6 +410,15 @@ export function PlayerArea({
     </div>
   ) : null;
 
+  const landColumnExtraOverlay = landColumnExtra ? (
+    <div
+      className="pointer-events-none absolute bottom-0 left-2 z-30"
+      data-testid="land-column-extra"
+    >
+      <div className="pointer-events-auto">{landColumnExtra}</div>
+    </div>
+  ) : null;
+
   return (
     <div
       className={`relative flex min-h-0 min-w-0 flex-1 overflow-visible ${
@@ -434,6 +442,7 @@ export function PlayerArea({
             <div className={`relative ${isCompactHeight ? "min-h-0 max-h-[40%]" : "shrink-0"}`}>
               {middleRow}
               {hudBand}
+              {landColumnExtraOverlay}
             </div>
             <div className="flex min-h-0 flex-1 items-end px-2" data-debug-label="Opp Creatures">
               <BattlefieldZoneOverflow
@@ -456,6 +465,7 @@ export function PlayerArea({
             <div className={`relative ${isCompactHeight ? "min-h-0 max-h-[40%]" : "shrink-0"}`}>
               {middleRow}
               {hudBand}
+              {landColumnExtraOverlay}
             </div>
             <BattlefieldRow groups={partitioned?.other ?? []} rowType="other" />
           </>