From 831f6efe85d42a15ee59352515c9400dfea2ac8e Mon Sep 17 00:00:00 2001
From: Lukas Thrane <76877975+Windove@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:41:24 +0200
Subject: [PATCH] fix bug (#356)

---
 .../src/components/homeComponents/homeGlobe.tsx     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/homeComponents/homeGlobe.tsx b/frontend/src/components/homeComponents/homeGlobe.tsx
index 71c9c4f..a75fc99 100644
--- a/frontend/src/components/homeComponents/homeGlobe.tsx
+++ b/frontend/src/components/homeComponents/homeGlobe.tsx
@@ -58,7 +58,8 @@ export default function SatelliteGlobe() {
             globeRef.current.controls().enablePan = false;
             globeRef.current.controls().enableRotate = true;
 
-            const setGlobeSize = () => {
+            // lock the initial height of the globe
+            const setInitialGlobeSize = () => {
                 if (globeRef.current && chart.current) {
                     const { width, height } =
                         chart.current.getBoundingClientRect();
@@ -68,7 +69,15 @@ export default function SatelliteGlobe() {
             };
 
             // Initially set the globe size to match the container
-            setGlobeSize();
+            setInitialGlobeSize();
+
+            // set globesize on screen resize
+            const setGlobeSize = () => {
+                if (globeRef.current && chart.current) {
+                    const { width } = chart.current.getBoundingClientRect();
+                    globeRef.current.width(width);
+                }
+            };
 
             // Resize listener to update the globe size
             if (typeof window !== "undefined") {