From 38528a50e558f6401c9bb20e7c2d3df896397899 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 10 Apr 2026 12:49:28 +0200
Subject: [PATCH] fix(planner): eliminate front-face bleed by removing
 preserve-3d
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

transform-style:preserve-3d on a parent with box-shadow/transition
causes Chrome to fail backface-visibility:hidden. Replace with
independent per-face rotateY transforms:
  front: 0deg → -180deg (flipped)
  back:  180deg → 0deg (flipped)
No preserve-3d needed — each face is its own compositing layer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/planner/DesktopDayTile.svelte     | 42 +++++++------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/planner/DesktopDayTile.svelte b/frontend/src/lib/planner/DesktopDayTile.svelte
index 446e74a..3e43a6a 100644
--- a/frontend/src/lib/planner/DesktopDayTile.svelte
+++ b/frontend/src/lib/planner/DesktopDayTile.svelte
@@ -123,10 +123,8 @@
 		onclick={handleFlip}
 		onkeydown={handleKeydown}
 	>
-		<div class="card" class:flipped={isFlipped}>
-
 			<!-- FRONT -->
-			<div class="card-front">
+			<div class="card-front" class:flipped={isFlipped}>
 				<div
 					class="card-front-inner"
 					style="background: {gradientBackground}; background-size: cover; background-position: center;"
@@ -162,7 +160,7 @@
 			</div>
 
 			<!-- BACK -->
-			<div class="card-back" aria-hidden={!isFlipped}>
+			<div class="card-back" class:flipped={isFlipped} aria-hidden={!isFlipped}>
 			<div class="card-back-inner">
 				<button
 					type="button"
@@ -205,7 +203,6 @@
 			</div> <!-- /.card-back-inner -->
 			</div>
 
-		</div>
 	</div>
 {:else}
 	<EmptyDayTile
@@ -250,38 +247,30 @@
 		pointer-events: none;
 	}
 
-	/* ── Card flip ── */
-	.card {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		transform-style: preserve-3d;
-		transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
-		border-radius: 10px;
-		will-change: transform;
-	}
-	.card.flipped {
-		transform: rotateY(180deg);
-	}
+	/* ── Card flip — independent face transforms, no preserve-3d ──
+	   preserve-3d + box-shadow/transition on parent causes Chrome to
+	   fail backface-visibility:hidden. Rotating each face independently
+	   avoids the 3D context entirely. */
 	.card-front,
 	.card-back {
 		position: absolute;
 		inset: 0;
 		backface-visibility: hidden;
 		-webkit-backface-visibility: hidden;
-		/* border-radius and overflow on inner wrappers, not here —
-		   overflow:hidden on preserve-3d children flattens the 3D context */
+		transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+		will-change: transform;
 	}
+	.card-front { transform: rotateY(0deg); }
+	.card-front.flipped { transform: rotateY(-180deg); }
+	.card-back { transform: rotateY(180deg); pointer-events: none; }
+	.card-back.flipped { transform: rotateY(0deg); pointer-events: auto; }
+	.card-front.flipped { pointer-events: none; }
 	.card-front-inner {
 		position: absolute;
 		inset: 0;
 		border-radius: 10px;
 		overflow: hidden;
 	}
-	/* backface-visibility hides visually but NOT pointer events — disable manually */
-	.card-back { pointer-events: none; }
-	.card.flipped .card-back { pointer-events: auto; }
-	.card.flipped .card-front { pointer-events: none; }
 
 	/* ── Front face ── */
 	.tile-overlay {
@@ -369,9 +358,6 @@
 	.tag-selected { background: rgba(46,110,57,.45); }
 
 	/* ── Back face ── */
-	.card-back {
-		transform: rotateY(180deg);
-	}
 	.card-back-inner {
 		position: absolute;
 		inset: 0;
@@ -445,7 +431,7 @@
 	.btn-danger:hover { background: rgba(220,76,62,.08); }
 
 	@media (prefers-reduced-motion: reduce) {
-		.card { transition: none; }
+		.card-front, .card-back { transition: none; }
 		.scene { transition: none; }
 	}
 </style>