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>
   );
 };