From 02db49175a5756968a31dc517681b33b443e1eb5 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 24 Mar 2026 21:24:25 +0100
Subject: [PATCH] fix(observatory): use inline styles to ensure SVG renders
 correctly

Replaced Tailwind utility classes with inline styles for the container
and SVG element to prevent CSS purging issues in production build.
Added explicit preserveAspectRatio and xmlns attributes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/observatory/SeenplatteScene.svelte  | 10 +++++++---
 .../apps/web/src/routes/(app)/observatory/+page.svelte |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/observatory/SeenplatteScene.svelte b/apps/manacore/apps/web/src/lib/components/observatory/SeenplatteScene.svelte
index 6b82157f3..226d8b22b 100644
--- a/apps/manacore/apps/web/src/lib/components/observatory/SeenplatteScene.svelte
+++ b/apps/manacore/apps/web/src/lib/components/observatory/SeenplatteScene.svelte
@@ -82,7 +82,10 @@
 	let viewBoxStr = $derived(`${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
 </script>
 
-<div class="relative h-full w-full overflow-hidden rounded-xl bg-sky-100">
+<div
+	class="relative overflow-hidden rounded-xl"
+	style="width: 100%; height: 100%; min-height: 500px; background-color: #e0f2fe;"
+>
 	<!-- Reset zoom button -->
 	<button
 		type="button"
@@ -125,8 +128,9 @@
 	<svg
 		bind:this={svgEl}
 		viewBox={viewBoxStr}
-		class="h-full w-full"
-		style="cursor: {isPanning ? 'grabbing' : 'grab'};"
+		preserveAspectRatio="xMidYMid meet"
+		xmlns="http://www.w3.org/2000/svg"
+		style="width: 100%; height: 100%; display: block; cursor: {isPanning ? 'grabbing' : 'grab'};"
 		onwheel={handleWheel}
 		onpointerdown={handlePointerDown}
 		onpointermove={handlePointerMove}
diff --git a/apps/manacore/apps/web/src/routes/(app)/observatory/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/observatory/+page.svelte
index 054187875..f9bd616c9 100644
--- a/apps/manacore/apps/web/src/routes/(app)/observatory/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/observatory/+page.svelte
@@ -8,8 +8,8 @@
 	}
 </script>
 
-<div class="flex flex-col gap-4">
-	<div class="h-[calc(100vh-12rem)] min-h-[500px] w-full">
+<div style="display: flex; flex-direction: column; gap: 1rem;">
+	<div style="height: calc(100vh - 12rem); min-height: 500px; width: 100%;">
 		<SeenplatteScene onSelectApp={handleSelectApp} />
 	</div>