Fix thead not sticking properly in chromium-based browsers, restore scroll-sync

WebHostLib/static/tablepage.css

@@ -14,6 +14,10 @@ table.dataTable, table.dataTable.no-footer{
     text-align: left;
 }
 
+table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
+    background-image: none;
+}
+
 table.dataTable thead{
     background-color: #b0a77d;
 }
@@ -26,3 +30,7 @@ table.dataTable thead tr th{
 table.dataTable tbody tr{
     background-color: inherit;
 }
+
+table.dataTable tbody tr:hover{
+    background-color: #e2eabb;
+}

WebHostLib/static/tracker.css

@@ -12,21 +12,23 @@
     max-height: 425px;
 }
 
+#tracker-header-bar{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
 #search{
     width: 200px;
     height: 20px;
     margin-bottom: 0.5rem;
 }
 
-.table-wrapper table tbody tr:hover{
-    background-color: #e2eabb;
-}
-
 div.dataTables_wrapper.no-footer .dataTables_scrollBody{
     border: none;
 }
 
-table.dataTable tbody th, table.dataTable tbody td{
+table.dataTable tbody td{
     padding: 4px 6px;
 }
 
@@ -36,13 +38,27 @@ table.dataTable, table.dataTable.no-footer{
     font-size: 1rem;
 }
 
-table.dataTable thead{
+table.dataTable thead th{
+    position: -webkit-sticky;
     position: sticky;
+    background-color: #b0a77d;
     top: 0;
 }
 
-table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
+table.dataTable thead th.upper-row{
-    background-image: none;
+    position: -webkit-sticky;
+    position: sticky;
+    background-color: #b0a77d;
+    height: 36px;
+    top: 0;
+}
+
+table.dataTable thead th.lower-row{
+    position: -webkit-sticky;
+    position: sticky;
+    background-color: #b0a77d;
+    height: 22px;
+    top: 46px;
 }
 
 table.dataTable tbody td{
@@ -68,6 +84,22 @@ img.alttp-sprite {
 }
 
 @media all and (max-width: 1700px) {
+    table.dataTable thead th.upper-row{
+        position: -webkit-sticky;
+        position: sticky;
+        background-color: #b0a77d;
+        height: 27px;
+        top: 0;
+    }
+
+    table.dataTable thead th.lower-row{
+        position: -webkit-sticky;
+        position: sticky;
+        background-color: #b0a77d;
+        height: 20px;
+        top: 37px;
+    }
+
     table.dataTable, table.dataTable.no-footer{
         font-size: 0.8rem;
     }
@@ -80,6 +112,22 @@ img.alttp-sprite {
 }
 
 @media all and (max-width: 1400px) {
+    table.dataTable thead th.upper-row{
+        position: -webkit-sticky;
+        position: sticky;
+        background-color: #b0a77d;
+        height: 22px;
+        top: 0;
+    }
+
+    table.dataTable thead th.lower-row{
+        position: -webkit-sticky;
+        position: sticky;
+        background-color: #b0a77d;
+        height: 19px;
+        top: 32px;
+    }
+
     table.dataTable, table.dataTable.no-footer{
         font-size: 0.6rem;
     }

WebHostLib/static/tracker.js

@@ -40,7 +40,7 @@ window.addEventListener('load', () => {
 
     window.addEventListener('resize', () => tables.draw());
 
-    $(".dataTables_scrollBody").scrollsync({
+    $(".table-wrapper").scrollsync({
         y_sync: true,
         x_sync: true
     });

WebHostLib/templates/tracker.html

@@ -86,7 +86,7 @@
                                 {% set colspan = colspan + 1 %}
                                 {% endif %}
                                 {% if area in icons %}
-                                    <th colspan="{{ colspan }}" class="center-column">
+                                    <th colspan="{{ colspan }}" class="center-column upper-row">
                                         <img class="alttp-sprite" src="{{ icons[area] }}" alt="{{ area }}"></th>
                                 {% else %}
                                     <th colspan="{{ colspan }}" class="center-column">{{ area }}</th>
@@ -96,16 +96,16 @@
                         </tr>
                         <tr>
                             {% for area in ordered_areas %}
-                                <th class="center-column">
+                                <th class="center-column lower-row">
                                     <img class="alttp-sprite" src="{{ icons["Chest"] }}" alt="Checks">
                                 </th>
                                 {% if area in key_locations %}
-                                    <th class="center-column">
+                                    <th class="center-column lower-row">
                                         <img class="alttp-sprite" src="{{ icons["Small Key"] }}" alt="Small Key">
                                     </th>
                                 {% endif %}
                                 {% if area in big_key_locations %}
-                                    <th class="center-column">
+                                    <th class="center-column lower-row">
                                         <img class="alttp-sprite" src="{{ icons["Big Key"] }}" alt="Big Key">
                                     </th>
                                 {% endif %}