From 0a179c25031d9b3ed264c7684761a36a4543a508 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sun, 15 Feb 2026 13:12:20 +1100
Subject: [PATCH] redo chart height to fit the window, and add fullscreen
 option in the hamburger menu if needed

---
 templates/index.html | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/templates/index.html b/templates/index.html
index 8c38d94..78d8b74 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,6 +15,8 @@
     <script src="https://code.highcharts.com/modules/annotations.js"></script>
     <script src="https://code.highcharts.com/modules/accessibility.js"></script>
     <script src="https://code.highcharts.com/themes/adaptive.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
+    <script src="https://code.highcharts.com/modules/fullscreen.js"></script>
     <style>
         .col-form-label { width:140px; }
         html { font-size: 75% !important; }
@@ -417,7 +419,48 @@
                 ]
             });
             {% endif %}
+        }
+
+        );
+
+
+        $(document).ready(function() {
+
+    // 1. The Resizing Logic
+    function fitChartsToWindow() {
+        // Targets any div with your highcharts class that is currently visible
+        $('.tab-pane.active .highcharts-dark').each(function() {
+            var $chartDiv = $(this);
+            var chart = $chartDiv.highcharts();
+
+            if (chart) {
+                // Get position of chart relative to the viewport
+                var topPos = $chartDiv[0].getBoundingClientRect().top;
+
+                // Calculate remaining height (subtracting 5-10px for safety)
+                var remainingHeight = window.innerHeight - topPos - 10;
+
+                // Apply height and reflow
+                $chartDiv.css('height', remainingHeight + 'px');
+                chart.reflow();
+            }
         });
+    }
+
+    // 2. Trigger when switching tabs
+    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
+        fitChartsToWindow();
+    });
+
+    // 3. Trigger when window is resized
+    $(window).on('resize', function() {
+        fitChartsToWindow();
+    });
+
+    // 4. Initial call (in case the first tab is a graph)
+    // Wrap in a small timeout to ensure Bootstrap finish rendering
+    setTimeout(fitChartsToWindow, 100);
+});
     </script>
     <div id="save_modal" class="modal modal-lg" tabindex="-1">
       <div class="modal-dialog">