From d80ceae128faa787cee29c47c31b302ee0e3cbf7 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sun, 26 Jul 2026 11:21:49 -0500
Subject: [PATCH] fix: declare grid-template-columns so the battle grid lays
 out as a grid, not a single column

CSS Grid without an explicit grid-template-columns defaults to a
single-column layout, so the 64-144 tiles stacked vertically and
the user saw a long column instead of an 8x8 (or 10x8 or 12x12)
battlefield. Set the column count via a CSS variable on the grid
root, written by match.js after the match snapshot loads (CSS attr()
for non-content properties is not yet shipped in Safari or Firefox).
---
 public/assets/styles.css | 2 +-
 public/js/match.js       | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/assets/styles.css b/public/assets/styles.css
index e392f98..bdb8753 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -20,7 +20,7 @@ table.bf-grid button[data-zone="bravo"] { outline: 3px solid #0c0; }
 .bf-errors { color: #c00; }
 .bf-toast { background: #dfd; padding: 0.5rem 1rem; margin: 0.5rem 0; }
 .bf-match { display: flex; gap: 1rem; }
-.bf-grid { display: grid; gap: 1px; background: #ddd; padding: 1px; width: max-content; }
+.bf-grid { display: grid; gap: 1px; background: #ddd; padding: 1px; width: max-content; grid-template-columns: repeat(var(--bf-cols, 8), 2.5rem); }
 .bf-tile { width: 2.5rem; height: 2.5rem; border: 0; background: #fff; padding: 0; position: relative; }
 .bf-tile[data-bf-terrain="forest"] { background: #cfc; }
 .bf-tile[data-bf-terrain="rough"] { background: #fec; }
diff --git a/public/js/match.js b/public/js/match.js
index 3ef2b79..c736116 100644
--- a/public/js/match.js
+++ b/public/js/match.js
@@ -66,6 +66,10 @@ function renderGrid(root, match) {
   const { width, height, terrain } = match.battlefield;
   root.setAttribute('data-bf-width', String(width));
   root.setAttribute('data-bf-height', String(height));
+  // Set the column count via a CSS variable so the grid-template-columns
+  // declaration can read it portably (CSS attr() for non-content properties
+  // is not yet supported in Safari or Firefox as of mid-2026).
+  root.style.setProperty('--bf-cols', String(width));
 
   const unitsByKey = {};
   match.units.forEach((unit) => {