fix(minesweeper): prevent default context menu on right-click for game board

src/app/(frontend)/styles.css

@@ -434,6 +434,12 @@
     }
 }
 
+.commendation-card {
+    align-self: start;
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+}
+
 /* Scrollbars — styled to match the dark frontend theme */
 * {
   scrollbar-width: thin;

src/components/frontend/account/AwardCard.tsx

@@ -28,7 +28,7 @@ export default function AwardCard(props: { awardImage: Media | null; award: Awar
       size={isCommendation ? "sm" : "default"}
       className={cn("text-center", {
         "medal-card": props.award.type === "medal",
-        "commendation-card": isCommendation,
+        "commendation-card self-start h-fit": isCommendation,
       })}
       style={
         commendationColor

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" && (
+        <fieldset
-          <>
+          disabled={phase === "playing"}
-            <div className="grid gap-2 md:grid-cols-3">
+          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>
+          </div>
-            {customUnlocked ? (
+          {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">
+            <p className="text-xs text-muted-foreground">
-                Clear all three standard locations to unlock custom minefields.
+              Clear all three standard locations to unlock custom minefields.
-              </p>
+            </p>
-            )}
+          )}
-          </>
+        </fieldset>
-        )}
 
         <div
           className={cn(