From f7590125fcf054b58d706728b40258edf904be5d Mon Sep 17 00:00:00 2001
From: Fredrik Johansson <fredrik.johansson@intraphone.com>
Date: Tue, 7 Jul 2026 20:07:47 +0200
Subject: [PATCH] Fix tile positioning: split html/body flex, use measured cell
 size

Applying display:flex to both html and body caused body to shrink-wrap
as a flex item of html, making cells ~53px instead of ~102px. Split the
rule so only body gets the flex centering. Also measure actual cell size
synchronously after initUI mounts and use it for tile translate calculations
so tiles align correctly regardless of container width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/style.css |  6 +++++-
 src/ui.ts     | 22 +++++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/style.css b/src/style.css
index ee8ae4a..57368e4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -25,7 +25,11 @@
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-html, body {
+html {
+  background: var(--bg);
+}
+
+body {
   background: var(--bg);
   color: var(--text);
   font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
diff --git a/src/ui.ts b/src/ui.ts
index 68b099a..44617bc 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -1,9 +1,9 @@
 import type { Grid } from './engine.ts';
 
-const CELL_SIZE = 100; // px — must match CSS logic
 const GAP = 10;
 const PADDING = 10;
-const STEP = CELL_SIZE + GAP;
+let CELL_SIZE = 100;
+let STEP = CELL_SIZE + GAP;
 
 interface TileState {
   el: HTMLElement;
@@ -59,14 +59,15 @@ export function initUI(container: HTMLElement): void {
   bestEl = container.querySelector('#best')!;
   scoreWrap = container.querySelector('#score-wrap')!;
 
-  // Measure cell size from grid-bg after layout
-  requestAnimationFrame(() => {
-    const cell = container.querySelector('.cell') as HTMLElement;
-    if (cell) {
-      const size = cell.getBoundingClientRect().width;
-      (container.querySelector('.tile-layer') as HTMLElement).style.setProperty('--cs', `${size}px`);
+  // Measure actual cell size (forces layout synchronously)
+  const cell = container.querySelector('.cell') as HTMLElement | null;
+  if (cell) {
+    const size = cell.getBoundingClientRect().width;
+    if (size > 0) {
+      CELL_SIZE = size;
+      STEP = size + GAP;
     }
-  });
+  }
 }
 
 function tileTranslate(row: number, col: number): string {
@@ -81,6 +82,9 @@ function createTileEl(value: number, row: number, col: number): HTMLElement {
   el.className = 'tile';
   el.dataset['v'] = String(value);
   el.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
     width: ${CELL_SIZE}px;
     height: ${CELL_SIZE}px;
     font-size: inherit;