Weyoun/chess
1
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: prevent row shrinking when highlighting last move
Some checks failed
CI Pipeline / Code Linting (pull_request) Successful in 13s
Details
CI Pipeline / Run Tests (pull_request) Failing after 21s
Details
CI Pipeline / Build Verification (pull_request) Has been skipped
Details
CI Pipeline / Generate Quality Report (pull_request) Successful in 21s
Details

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Christoph Wagner 2025-11-23 20:40:56 +01:00
parent df3735a8ec
commit 266749a97b
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/board.css
View File

@ -1,8 +1,8 @@
/* Chess Board Styling */ /* Chess Board Styling */
.chess-board { .chess-board {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(8, 75px);
grid-template-rows: repeat(8, 1fr); grid-template-rows: repeat(8, 75px);
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 4px solid var(--primary-color); border: 4px solid var(--primary-color);
@ -16,7 +16,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: none;
} }
.square.light { .square.light {
@ -60,6 +61,7 @@
.square.last-move { .square.last-move {
background-color: rgba(155, 199, 0, 0.4) !important; background-color: rgba(155, 199, 0, 0.4) !important;
box-shadow: none;
} }
/* Coordinates */ /* Coordinates */