Correct resize

firebird-ng/src/app/app.component.html

@@ -1,4 +1,4 @@
-<nav class="  navbar navbar-expand-lg navbar-dark" style="background-color: #424242;">
+<nav class="  navbar navbar-expand-lg navbar-dark" id="main-top-navbar" style="background-color: #424242;">
   <a class="navbar-brand" href="#"><img src="assets/firebird/firebird-simplified-circle.png" width="32" height="32" alt="App Logo"></a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

firebird-ng/src/app/pages/main-display/main-display.component.html

@@ -77,7 +77,7 @@
 
     <div id="eventDisplay"></div>
 
-    <div class="time-controls">
+    <div class="time-controls" id="bottom-controls">
 
 
 

firebird-ng/src/app/pages/main-display/main-display.component.ts

@@ -436,6 +436,8 @@ export class MainDisplayComponent implements OnInit {
   }
 
 
+
+
   ngOnInit() {
     let eventSource = this.settings.trajectoryEventSource.value;
     let eventConfig = {eventFile: "https://firebird-eic.org/py8_all_dis-cc_beam-5x41_minq2-100_nevt-5.evt.json.zip", eventType: "zip"};
@@ -497,6 +499,36 @@ export class MainDisplayComponent implements OnInit {
     // Initialize the event display
     this.eventDisplay.init(configuration);
 
+    window.addEventListener('resize', () => {
+      const renderer = this.threeFacade.mainRenderer;
+      const camera = this.threeFacade.mainCamera;
+      const rendererElement = renderer.domElement;
+      if(rendererElement == null) {
+        return;
+      }
+
+      // Calculate adjusted dimensions
+      const headerHeight = document?.getElementById('main-top-navbar')?.offsetHeight ?? 0;
+      const footerHeight = document?.getElementById('bottom-controls')?.offsetHeight ?? 0;
+      const sidePanelWidth = document?.getElementById('side-panel')?.offsetWidth ?? 0;
+
+      const adjustedWidth = rendererElement.offsetWidth - sidePanelWidth;
+      const adjustedHeight = rendererElement.offsetHeight - headerHeight - footerHeight;
+
+      // Update renderer size
+      renderer.setSize(adjustedWidth, adjustedHeight);
+
+      if (camera.isOrthographicCamera) {
+        camera.left = adjustedWidth / -2;
+        camera.right = adjustedWidth / 2;
+        camera.top = adjustedHeight / 2;
+        camera.bottom = adjustedHeight / -2;
+      } else {
+        camera.aspect = adjustedWidth / adjustedHeight;
+      }
+      camera.updateProjectionMatrix();
+    });
+
     this.controller.buttonB.onPress.subscribe(value => {
       this.onControllerBPressed(value);
     });