From 6d9b0ed8d8a8284ff0044474a239b8679676ec7e Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Fri, 28 Aug 2026 20:04:15 -0400
Subject: [PATCH] fix(minesweeper): prevent default context menu on right-click
 for game board

---
 .../frontend/eod/MinesweeperBoard.tsx         | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/frontend/eod/MinesweeperBoard.tsx b/src/components/frontend/eod/MinesweeperBoard.tsx
index 1309713..d10c298 100644
--- a/src/components/frontend/eod/MinesweeperBoard.tsx
+++ b/src/components/frontend/eod/MinesweeperBoard.tsx
@@ -504,6 +504,7 @@ export function MinesweeperBoard({
           : "flex items-center justify-center p-2",
       )}
       style={{ containerType: "inline-size" }}
+      onContextMenu={(event) => event.preventDefault()}
     >
       <div
         className="grid min-w-max grid-cols-[repeat(var(--board-cols),var(--cell-size))] gap-1"
@@ -611,7 +612,10 @@ export function MinesweeperBoard({
           </LoginLink>
         </div>
       )}
-      <div className="flex select-none flex-col gap-4 rounded-xl border border-border bg-card p-4 shadow">
+      <div
+        className="flex select-none flex-col gap-4 rounded-xl border border-border bg-card p-4 shadow"
+        onContextMenu={(event) => event.preventDefault()}
+      >
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2 text-sm font-semibold">
@@ -651,9 +655,14 @@ export function MinesweeperBoard({
           />
         </label>
 
-        {phase !== "playing" && (
-          <>
-            <div className="grid gap-2 md:grid-cols-3">
+        <fieldset
+          disabled={phase === "playing"}
+          className={cn(
+            "m-0 flex min-w-0 flex-col gap-4 border-0 p-0 transition-opacity duration-300",
+            phase === "playing" && "pointer-events-none opacity-40",
+          )}
+        >
+          <div className="grid gap-2 md:grid-cols-3">
               {DIFFICULTY_KEYS.map((key) => {
                 const option = DIFFICULTIES[key];
                 return (
@@ -675,8 +684,8 @@ export function MinesweeperBoard({
                   </Button>
                 );
               })}
-            </div>
-            {customUnlocked ? (
+          </div>
+          {customUnlocked ? (
               <div className="rounded-lg border border-emerald-500/40 bg-emerald-500/5 p-3">
                 <div className="flex flex-wrap items-end gap-3">
                   <div className="flex flex-col gap-1">
@@ -783,13 +792,12 @@ export function MinesweeperBoard({
                   {CUSTOM_MAX_SIZE}×{CUSTOM_MAX_SIZE} field.
                 </p>
               </div>
-            ) : (
-              <p className="text-xs text-muted-foreground">
-                Clear all three standard locations to unlock custom minefields.
-              </p>
-            )}
-          </>
-        )}
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              Clear all three standard locations to unlock custom minefields.
+            </p>
+          )}
+        </fieldset>
 
         <div
           className={cn(