redo chart height to fit the window, and add fullscreen option in the hamburger menu if needed

BUGS

@@ -7,3 +7,14 @@
     - something to do with missing year of data in quarterly bills - still an issue
 
 * if change a bill (like Amazon), then its future estimates don't update
+    - recalc does fix, so a simple delete future bills for this bill type and
+      re-estiate will do it, BUT, its a simple POST now...
+      I think a re-write of functions in bills may be needed, so that we can
+      pull out future estimates based on growth (that may need to change due to
+      this changed amount), etc.
+    - also occurs if we delete a bill
+    -- but on the +ve side, changing growth toggle, resets future bills - 
+        so can call UseGrowth( bt_id )
+        SO only missing bit would be to recalculate growth based on existing
+        bills for this bill type.... SO, may not need to redo code everywhere,
+        but should consider it anyway

TODO

@@ -1,7 +1,9 @@
 bills:
-    bill for the year (when removed from LE, should be dynamic)
+    * bill for the year (when removed from LE, should be dynamic)
+        - REQUIRES REWRITE OF BILLS TO BE HEADLESS and then called from UI/maybe more ajax
+          - noting BUT also requires above
 
-    bills html, and growth types are poor code repitition / lame... could I do something more like:
+    * bills html, and growth types are poor code repetition / lame... could I do something more like:
         {% for gt in growth %}
             {% if gt.name == 'Min' %}
                 <option value='min'

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,6 +419,47 @@
                 ]
             });
             {% 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">