From b57efa1dc6e6ab0f945a5d8302c218036a98acd6 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Thu, 19 Mar 2026 02:59:34 +0000
Subject: [PATCH] =?UTF-8?q?Fiks=20fullskjerm:=20portal=20til=20document.bo?=
 =?UTF-8?q?dy=20for=20=C3=A5=20unng=C3=A5=20Canvas=20transform?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Canvas sin CSS transform bryter position:fixed (kjent CSS-gotcha).
Fullskjerm flytter nå DOM-elementet til body, og tilbake ved exit.
z-index 9999 og bakgrunnsfarge #0a0a0b.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/blockshell/BlockShell.svelte   | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/blockshell/BlockShell.svelte b/frontend/src/lib/components/blockshell/BlockShell.svelte
index 67cf216..415a61d 100644
--- a/frontend/src/lib/components/blockshell/BlockShell.svelte
+++ b/frontend/src/lib/components/blockshell/BlockShell.svelte
@@ -126,8 +126,29 @@
 	});
 
 	// --- Fullscreen toggle ---
+	// Fullscreen panels must escape Canvas's transform context,
+	// which breaks position:fixed. We move the DOM element to
+	// document.body when entering fullscreen, and back when exiting.
+	let originalParent: HTMLElement | null = null;
+	let originalNextSibling: Node | null = null;
+
 	function toggleFullscreen() {
 		isFullscreen = !isFullscreen;
+		if (containerEl) {
+			if (isFullscreen) {
+				originalParent = containerEl.parentElement;
+				originalNextSibling = containerEl.nextSibling;
+				document.body.appendChild(containerEl);
+			} else if (originalParent) {
+				if (originalNextSibling) {
+					originalParent.insertBefore(containerEl, originalNextSibling);
+				} else {
+					originalParent.appendChild(containerEl);
+				}
+				originalParent = null;
+				originalNextSibling = null;
+			}
+		}
 		onFullscreenChange?.(isFullscreen);
 	}
 
@@ -438,11 +459,12 @@
 	.blockshell-fullscreen {
 		position: fixed;
 		inset: 0;
-		z-index: 50;
+		z-index: 9999;
 		width: 100% !important;
 		height: 100% !important;
 		border-radius: 0;
 		border: none;
+		background: #0a0a0b;
 	}
 
 	.blockshell-minimized {