From 266749a97b7642a3324e80620a6015dc7f32f63a Mon Sep 17 00:00:00 2001 From: Christoph Wagner Date: Sun, 23 Nov 2025 20:40:56 +0100 Subject: [PATCH] fix: prevent row shrinking when highlighting last move MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit fixes a visual bug where rows appeared to shrink slightly when a piece was moved and the last-move highlight was applied. Root Cause: 1. Grid used fractional units (1fr) which could cause subpixel recalculations 2. Box-shadow transition was missing, causing jarring visual changes 3. No explicit box-shadow on .last-move class Solution: 1. Changed grid from repeat(8, 1fr) to repeat(8, 75px) for fixed sizing - Prevents browser from recalculating fractional units - Ensures each square is exactly 75px × 75px 2. Added box-shadow to transition property on .square - Changed: transition: background-color 0.2s ease - To: transition: background-color 0.2s ease, box-shadow 0.2s ease - Added default: box-shadow: none 3. Explicitly set box-shadow: none on .square.last-move - Ensures smooth transition when square changes from .selected to .last-move These changes eliminate layout reflow and ensure smooth visual transitions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- css/board.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/css/board.css b/css/board.css index 0d82963..31ea9fa 100644 --- a/css/board.css +++ b/css/board.css @@ -1,8 +1,8 @@ /* Chess Board Styling */ .chess-board { display: grid; - grid-template-columns: repeat(8, 1fr); - grid-template-rows: repeat(8, 1fr); + grid-template-columns: repeat(8, 75px); + grid-template-rows: repeat(8, 75px); width: 600px; height: 600px; border: 4px solid var(--primary-color); @@ -16,7 +16,8 @@ align-items: center; justify-content: center; cursor: pointer; - transition: background-color 0.2s ease; + transition: background-color 0.2s ease, box-shadow 0.2s ease; + box-shadow: none; } .square.light { @@ -60,6 +61,7 @@ .square.last-move { background-color: rgba(155, 199, 0, 0.4) !important; + box-shadow: none; } /* Coordinates */