From 1cdec11b844c183500cb4ff4d93081c61bfad996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 24 Aug 2026 17:13:47 +0000
Subject: [PATCH] put the status row above the board, and make it readable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

text-xs muted at the bottom of the panel was where none of it got read.
Everything in that row is either a state you need before you touch the game
(connected, click the board to send it keys) or a repair for when it stops
behaving — a footer is the wrong place for both.

Now above the board, text-sm, text-primary, with the icons up to size-4 and
hover:underline instead of a colour change that is no longer available at
primary. `shrink-0` so it keeps its height and the canvas gives way, which is
the same reason the board's row has `min-h-0`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: de3ed4e6-f88a-429c-94e6-a760336ba83b
---
 web/MinesweeperPanel.tsx | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/MinesweeperPanel.tsx b/web/MinesweeperPanel.tsx
index 97f742b..014c0c4 100644
--- a/web/MinesweeperPanel.tsx
+++ b/web/MinesweeperPanel.tsx
@@ -347,6 +347,26 @@ export const MinesweeperPanel = () => {
   return (
     <div className="flex size-full flex-col items-center justify-center gap-3 bg-muted/30 p-4">
       {/* min-h-0 on the row, so the canvas gives way to the status line rather than overflowing it. */}
+      {/* Above the board, not below it. Everything here is either a state you need before you touch the
+          game or a repair for when it stops behaving, and a footer is where neither gets read. */}
+      <div className="flex shrink-0 items-center gap-4 text-sm text-primary">
+        <span>{connected ? 'connected' : 'connecting…'}</span>
+        {/* Focus decides where keys go, and a canvas gives no hint that it can hold any. */}
+        <span>click the board to send it keys</span>
+        <button type="button" onClick={() => void refresh()} className="flex items-center gap-1.5 hover:underline">
+          <RefreshCw className="size-4" /> refresh
+        </button>
+        {/* Named for the SYMPTOM, not the mechanism: nobody experiencing this knows a modifier is stuck,
+            they know their clicks stopped doing the right thing. */}
+        <button
+          type="button"
+          onClick={() => void resetInput()}
+          title="Release every key and mouse button the session thinks is held"
+          className="flex items-center gap-1.5 hover:underline"
+        >
+          <Unplug className="size-4" /> clicks acting wrong?
+        </button>
+      </div>
       <div ref={boxRef} className="flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
         <canvas
           ref={canvasRef}
@@ -370,25 +390,7 @@ export const MinesweeperPanel = () => {
           style={{ ...(stage ?? {}), cursor: connected ? 'default' : 'progress' }}
         />
       </div>
-      <div className="flex items-center gap-3 text-xs text-muted-foreground">
-        <span>{connected ? 'connected' : 'connecting…'}</span>
-        {/* Focus decides where keys go, and a canvas gives no hint that it can hold any. */}
-        <span>click the board to send it keys</span>
-        <button type="button" onClick={() => void refresh()} className="flex items-center gap-1 hover:text-foreground">
-          <RefreshCw className="size-3" /> refresh
-        </button>
-        {/* Named for the SYMPTOM, not the mechanism: nobody experiencing this knows a modifier is stuck,
-            they know their clicks stopped doing the right thing. */}
-        <button
-          type="button"
-          onClick={() => void resetInput()}
-          title="Release every key and mouse button the session thinks is held"
-          className="flex items-center gap-1 hover:text-foreground"
-        >
-          <Unplug className="size-3" /> clicks acting wrong?
-        </button>
-      </div>
-      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+      {error ? <p className="shrink-0 text-sm text-destructive">{error}</p> : null}
     </div>
   );
 };