From 079349dc0f9c6aca5c7eac741cdd8ee8f793b10f Mon Sep 17 00:00:00 2001 From: funman300 Date: Wed, 13 May 2026 11:20:56 -0700 Subject: [PATCH] fix(web): explicit top/left on .slot and .recycle-label MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Without top:0;left:0, Firefox and other non-Chrome engines place absolute elements at the content edge (padding offset = 20px) before the JS transform is applied, shifting slots 20px below/right of cards. Cards already had explicit top:0;left:0; slots now match. .recycle-label also had top:50%;left:50% which combined with the JS inline transform would place the ↺ symbol halfway across the board. Changed to top:0;left:0 so JS transform is the sole position source. Co-Authored-By: Claude Sonnet 4.6 --- solitaire_server/web/game.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/solitaire_server/web/game.css b/solitaire_server/web/game.css index 77d5f86..ff43283 100644 --- a/solitaire_server/web/game.css +++ b/solitaire_server/web/game.css @@ -106,6 +106,7 @@ main { /* Empty-pile slot markers */ .slot { position: absolute; + top: 0; left: 0; /* explicit insets — without these some browsers offset by padding */ width: var(--card-w); height: var(--card-h); border: 2px dashed rgba(255,255,255,0.15); @@ -187,11 +188,10 @@ main { box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0,0,0,0.5); } -/* Recycle indicator on empty stock */ +/* Recycle indicator on empty stock — JS sets transform to position it */ .recycle-label { position: absolute; - top: 50%; left: 50%; - transform: translate(-50%, -50%); + top: 0; left: 0; font-size: 26px; color: rgba(255,255,255,0.3); pointer-events: none;