From 1680d13b05e1767b0f9602880a6c7346b7d5a125 Mon Sep 17 00:00:00 2001
From: Josh-Heaps <jheaps@conservice.com>
Date: Sat, 13 Jun 2026 18:47:31 -0600
Subject: [PATCH] bug fix

---
 JoshHeaps.Net/wwwroot/css/chess/spectate.css  | 12 +++++++++
 .../wwwroot/js/ChessScripts/Spectate.js       | 25 +++++++++++++++----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/JoshHeaps.Net/wwwroot/css/chess/spectate.css b/JoshHeaps.Net/wwwroot/css/chess/spectate.css
index 297fe93..3b57bc9 100644
--- a/JoshHeaps.Net/wwwroot/css/chess/spectate.css
+++ b/JoshHeaps.Net/wwwroot/css/chess/spectate.css
@@ -156,6 +156,18 @@ body.fullscreen-open {
     margin-bottom: 0.75rem;
 }
 
+/* Always occupies its space (it's only hidden, not removed) so toggling "check" never
+   re-centers or wraps the header line. */
+.checkTag {
+    margin-left: 0.4rem;
+    color: #e8a04a;
+    visibility: hidden;
+}
+
+.checkTag.show {
+    visibility: visible;
+}
+
 .miniBoard {
     width: 100%;
     aspect-ratio: 1 / 1;
diff --git a/JoshHeaps.Net/wwwroot/js/ChessScripts/Spectate.js b/JoshHeaps.Net/wwwroot/js/ChessScripts/Spectate.js
index 35fa15e..a17d2f1 100644
--- a/JoshHeaps.Net/wwwroot/js/ChessScripts/Spectate.js
+++ b/JoshHeaps.Net/wwwroot/js/ChessScripts/Spectate.js
@@ -123,7 +123,7 @@ const Spectate = {
         const header = document.createElement("div");
         header.className = "gameCardHeader";
         header.id = `header-${game.gameId}`;
-        header.textContent = this.headerText(this.games.get(game.gameId), game.currentPlayer, game.moveCount, game.isCheck);
+        this.renderHeader(header, this.games.get(game.gameId), game.currentPlayer, game.moveCount, game.isCheck);
         card.appendChild(header);
 
         const board = document.createElement("div");
@@ -217,7 +217,23 @@ const Spectate = {
         const header = document.getElementById(`header-${gameId}`);
 
         if (stored && header)
-            header.textContent = this.headerText(stored, currentPlayer, moveCount, isCheck);
+            this.renderHeader(header, stored, currentPlayer, moveCount, isCheck);
+    },
+
+    // Renders the header as a base text span plus a "check" tag that always occupies its slot
+    // (hidden when not in check), so toggling check never re-centers or wraps the line.
+    renderHeader(header, stored, currentPlayer, moveCount, isCheck) {
+        const showCheck = !stored.result && isCheck;
+        header.innerHTML = "";
+
+        const main = document.createElement("span");
+        main.textContent = this.headerText(stored, currentPlayer, moveCount);
+
+        const tag = document.createElement("span");
+        tag.className = showCheck ? "checkTag show" : "checkTag";
+        tag.textContent = "• check";
+
+        header.append(main, tag);
     },
 
     gameLabel(stored) {
@@ -236,12 +252,11 @@ const Spectate = {
         }
     },
 
-    headerText(stored, currentPlayer, moveCount, isCheck) {
+    headerText(stored, currentPlayer, moveCount) {
         if (stored.result)
             return `${this.gameLabel(stored)} · move ${moveCount} · final`;
 
-        const check = isCheck ? " • check" : "";
-        return `${this.gameLabel(stored)} · move ${moveCount} · ${currentPlayer} to move${check}`;
+        return `${this.gameLabel(stored)} · move ${moveCount} · ${currentPlayer} to move`;
     },
 
     resultTextFromState(state) {