From aa60f22820f7ab3087ab5b7c02159ee98c19c6ea Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Fri, 24 Apr 2026 11:56:24 +0200
Subject: [PATCH] Fix Mindmap-Rendering: Timing + Fallback-Dimensionen

- requestAnimationFrame vor buildGraph() (DOM muss SVG erst rendern)
- Fallback W/H wenn Container noch kein Layout hat (< 100px)
- Verhindert leere Mindmap nach Podcast-Auswahl

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 webapp/index.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/webapp/index.html b/webapp/index.html
index 2d6e1dc..2e69712 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -1131,7 +1131,8 @@ function init() {
     <p style="margin-top:16px">Klicke auf einen Themenknoten oder eine Episode.</p>`;
 
   buildFilters();
-  buildGraph();
+  // Wait for DOM to render the SVG element before building the graph
+  requestAnimationFrame(() => { requestAnimationFrame(() => { buildGraph(); }); });
   Search.init();
 }
 
@@ -1169,8 +1170,13 @@ function filterStaffel(id) {
 function buildGraph() {
   const svg = d3.select('#svg');
   const container = document.getElementById('mindmap');
-  const W = container.clientWidth || window.innerWidth;
-  const H = container.clientHeight || window.innerHeight * 0.45;
+  let W = container.clientWidth;
+  let H = container.clientHeight;
+  // Fallback if container not yet laid out
+  if (!W || W < 100) W = window.innerWidth - 400;
+  if (!H || H < 100) H = window.innerHeight - 52;
+  if (W < 200) W = 600;
+  if (H < 200) H = 400;
   const isMobile = W < 600;
   const sc = isMobile ? 0.6 : 1;