Dashboard - table sticky headers

Improve the behavior of sticky table headers when used with datatables (iTable). This includes tweaking position to ensure that z-index is relative to the container rather than the viewport as well as removing top margin to prevent a 1 pixel gap when scrolling with a fixed header.

src/resources/formats/dashboard/quarto-dashboard.js

@@ -51,6 +51,7 @@ function refreshStickyHeaders() {
     const iTable = cellOutputNode.querySelector(".itables table");
     if (iTable) {
       stickyThead.apply([iTable], { scrollableArea: cellOutputNode });
+      cellOutputNode.classList.add("dashboard-data-table");
     }
   }
 }

src/resources/formats/dashboard/quarto-dashboard.scss

@@ -1009,5 +1009,10 @@ $valuebox-colors: (
 /*-- itables --*/
 .tableFloatingHeaderOriginal {
   background-color: $card-bg;
-  transform: translateY(-1px);
+  position: sticky !important;
+  top: 0 !important;
+}
+
+.dashboard-data-table {
+  margin-top: -1px;
 }