From a766d47294006cbe30da91b9370db49a20046871 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 21 May 2026 08:21:18 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20F=C3=BCge=20ResizeObserver=20hinzu,=20u?=
 =?UTF-8?q?m=20Gr=C3=B6=C3=9Fen=C3=A4nderungen=20des=20Containers=20zu=20?=
 =?UTF-8?q?=C3=BCberwachen=20und=20die=20Darstellung=20anzupassen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Character3D.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/components/Character3D.vue b/frontend/src/components/Character3D.vue
index 4aa6581..76685ca 100644
--- a/frontend/src/components/Character3D.vue
+++ b/frontend/src/components/Character3D.vue
@@ -82,6 +82,7 @@ export default {
       threeRuntime: null,
       threeLoaders: null,
       threeModelRuntime: null
+      ,resizeObserver: null
     };
   },
   computed: {
@@ -151,6 +152,8 @@ export default {
   async mounted() {
     await this.init3D();
     await this.loadModel();
+    // Ensure renderer has correct size if the container became visible after mount
+    this.onWindowResize();
     this.animate();
   },
   beforeUnmount() {
@@ -229,6 +232,17 @@ export default {
 
       // Resize Handler
       window.addEventListener('resize', this.onWindowResize);
+      // Observe size changes of the container (useful when element is shown/hidden via v-show)
+      if (typeof window !== 'undefined' && window.ResizeObserver) {
+        this.resizeObserver = new window.ResizeObserver(() => {
+          this.onWindowResize();
+        });
+        try {
+          this.resizeObserver.observe(container);
+        } catch (e) {
+          // ignore observe errors on older browsers
+        }
+      }
     },
 
     async loadBackground() {
@@ -455,6 +469,12 @@ export default {
       if (this.scene) {
         this.scene.clear();
       }
+      if (this.resizeObserver) {
+        try {
+          this.resizeObserver.disconnect();
+        } catch (e) {}
+        this.resizeObserver = null;
+      }
     }
   }
 };