From 9c63c361287d5c2f134f27cf20f6fa1d831c7e58 Mon Sep 17 00:00:00 2001
From: metacube <metacube@gmail.com>
Date: Thu, 4 Jun 2026 14:27:21 +0200
Subject: [PATCH] Fix finance 3D canvas sizing

---
 .../Components/Pages/ManagementCockpit.razor  |  4 ++--
 TrafagSalesExporter/wwwroot/js/finance3d.js   | 24 +++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/TrafagSalesExporter/Components/Pages/ManagementCockpit.razor b/TrafagSalesExporter/Components/Pages/ManagementCockpit.razor
index 7abb689..c00fa15 100644
--- a/TrafagSalesExporter/Components/Pages/ManagementCockpit.razor
+++ b/TrafagSalesExporter/Components/Pages/ManagementCockpit.razor
@@ -713,8 +713,8 @@
                 </MudGrid>
             </MudPaper>
 
-            <MudPaper Class="pa-0 finance-3d-surface" Elevation="1">
-                <canvas @ref="_finance3dCanvas" class="finance-3d-canvas"></canvas>
+            <MudPaper Class="pa-0 finance-3d-surface" Elevation="1" Style="width:100%;height:calc(100vh - 260px);min-height:680px;overflow:hidden;background:#f7f9fb;">
+                <canvas @ref="_finance3dCanvas" class="finance-3d-canvas" style="display:block;width:100%;height:100%;touch-action:none;"></canvas>
             </MudPaper>
         </MudTabPanel>
         <MudTabPanel Text="@T("Rohdaten Diagnose", "Raw-data diagnostics")" Icon="@Icons.Material.Filled.QueryStats">
diff --git a/TrafagSalesExporter/wwwroot/js/finance3d.js b/TrafagSalesExporter/wwwroot/js/finance3d.js
index b6a91fe..72c7d5d 100644
--- a/TrafagSalesExporter/wwwroot/js/finance3d.js
+++ b/TrafagSalesExporter/wwwroot/js/finance3d.js
@@ -76,7 +76,7 @@
       root,
       angleX: previous ? previous.angleX : -0.62,
       angleY: previous ? previous.angleY : 0.78,
-      distance: previous ? previous.distance : 30,
+      distance: previous ? previous.distance : 23,
       targetX: previous ? previous.targetX : 0,
       targetY: previous ? previous.targetY : 2.8,
       targetZ: previous ? previous.targetZ : 0,
@@ -441,8 +441,9 @@
   }
 
   function renderState(state, canvas) {
-    const width = canvas.clientWidth || 900;
-    const height = canvas.clientHeight || 520;
+    const size = resolveCanvasSize(canvas);
+    const width = size.width;
+    const height = size.height;
     state.camera.aspect = width / height;
     state.camera.updateProjectionMatrix();
     const horizontal = Math.cos(state.angleX) * state.distance;
@@ -455,9 +456,24 @@
     state.renderer.render(state.scene, state.camera);
   }
 
+  function resolveCanvasSize(canvas) {
+    const parent = canvas.parentElement;
+    const parentRect = parent ? parent.getBoundingClientRect() : null;
+    const canvasRect = canvas.getBoundingClientRect();
+    const width = Math.max(
+      640,
+      Math.floor(parentRect && parentRect.width > 320 ? parentRect.width : canvasRect.width || canvas.clientWidth || 900));
+    const height = Math.max(
+      520,
+      Math.floor(parentRect && parentRect.height > 240 ? parentRect.height : canvasRect.height || canvas.clientHeight || 680));
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    return { width, height };
+  }
+
   function renderFallback(canvas, rows, options) {
     const ctx = canvas.getContext("2d");
-    const rect = canvas.getBoundingClientRect();
+    const rect = resolveCanvasSize(canvas);
     const dpr = Math.min(window.devicePixelRatio || 1, 2);
     canvas.width = Math.max(1, Math.floor(rect.width * dpr));
     canvas.height = Math.max(1, Math.floor(rect.height * dpr));