From a43a8ec33fc763688408cbf57c80e22aa26562ad Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 10 Apr 2026 12:47:10 +0200
Subject: [PATCH] fix(planner): prevent front face bleeding through flipped
 card

overflow:hidden on direct children of preserve-3d flattens the 3D
context in Chrome, causing backface-visibility:hidden to fail.

Move border-radius + overflow to inner wrapper divs (.card-front-inner,
.card-back-inner) and keep the face elements themselves free of those
properties. Also add -webkit-backface-visibility:hidden and
will-change:transform for consistent GPU compositing.

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

diff --git a/frontend/src/lib/planner/DesktopDayTile.svelte b/frontend/src/lib/planner/DesktopDayTile.svelte
index 549583c..446e74a 100644
--- a/frontend/src/lib/planner/DesktopDayTile.svelte
+++ b/frontend/src/lib/planner/DesktopDayTile.svelte
@@ -126,10 +126,11 @@
 		<div class="card" class:flipped={isFlipped}>
 
 			<!-- FRONT -->
-			<div
-				class="card-front"
-				style="background: {gradientBackground}; background-size: cover; background-position: center;"
-			>
+			<div class="card-front">
+				<div
+					class="card-front-inner"
+					style="background: {gradientBackground}; background-size: cover; background-position: center;"
+				>
 				<!-- Full-tile dual gradient overlay -->
 				<div class="tile-overlay"></div>
 
@@ -157,10 +158,12 @@
 						</div>
 					{/if}
 				</div>
+				</div> <!-- /.card-front-inner -->
 			</div>
 
 			<!-- BACK -->
 			<div class="card-back" aria-hidden={!isFlipped}>
+			<div class="card-back-inner">
 				<button
 					type="button"
 					aria-label="Schließen"
@@ -199,6 +202,7 @@
 						{/if}
 					{/if}
 				</div>
+			</div> <!-- /.card-back-inner -->
 			</div>
 
 		</div>
@@ -254,6 +258,7 @@
 		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);
@@ -263,6 +268,13 @@
 		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 */
+	}
+	.card-front-inner {
+		position: absolute;
+		inset: 0;
 		border-radius: 10px;
 		overflow: hidden;
 	}
@@ -359,10 +371,15 @@
 	/* ── Back face ── */
 	.card-back {
 		transform: rotateY(180deg);
+	}
+	.card-back-inner {
+		position: absolute;
+		inset: 0;
+		border-radius: 10px;
+		overflow-y: auto;
 		background: var(--color-page);
 		border: 1px solid var(--color-border);
 		padding: 10px;
-		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 	}