Tables now automatically resize themselves to fit page height

WebHostLib/static/tracker.css

@@ -1,4 +1,4 @@
-#tracker-wrapper{
+#tracker-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -8,8 +8,7 @@
 .table-wrapper{
     overflow-y: auto;
     overflow-x: auto;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
-    max-height: 425px;
 }
 
 #tracker-header-bar{

WebHostLib/static/tracker.js

@@ -1,3 +1,17 @@
+const adjustTableHeight = () => {
+    const tablesContainer = document.getElementById('tables-container');
+    const upperDistance = tablesContainer.getBoundingClientRect().top;
+
+    const containerHeight = window.innerHeight - upperDistance;
+    tablesContainer.style.maxHeight = `calc(${containerHeight}px - 1rem)`;
+
+    const tableWrappers = document.getElementsByClassName('table-wrapper');
+    for(let i=0; i < tableWrappers.length; i++){
+        const maxHeight = (window.innerHeight - upperDistance) / 2;
+        tableWrappers[i].style.maxHeight = `calc(${maxHeight}px - 1rem)`;
+    }
+};
+
 window.addEventListener('load', () => {
     const tables = $(".table").DataTable({
         paging: false,
@@ -38,10 +52,15 @@ window.addEventListener('load', () => {
 
     setInterval(update, 30000);
 
-    window.addEventListener('resize', () => tables.draw());
+    window.addEventListener('resize', () => {
+        adjustTableHeight();
+        tables.draw()
+    });
 
     $(".table-wrapper").scrollsync({
         y_sync: true,
         x_sync: true
     });
+
+    adjustTableHeight();
 });

WebHostLib/templates/tracker.html

@@ -16,6 +16,7 @@
                 {%- endfor -%}">Multistream</a></span>
             {%- endif -%}
         </div>
+        <div id="tables-container">
             {% for team, players in inventory.items() %}
                 <div class="table-wrapper">
                     <table class="table unique-item-table">
@@ -143,4 +144,5 @@
                 </div>
             {% endfor %}
         </div>
+    </div>
 {% endblock %}