From b7977313c3776dffddc0e477d942c2250266efdf Mon Sep 17 00:00:00 2001
From: Charles Teague <cteague@gmail.com>
Date: Tue, 13 Feb 2024 14:19:02 -0500
Subject: [PATCH] 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   | 1 +
 src/resources/formats/dashboard/quarto-dashboard.scss | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/resources/formats/dashboard/quarto-dashboard.js b/src/resources/formats/dashboard/quarto-dashboard.js
index b1e7c95def..b24b74a08f 100644
--- a/src/resources/formats/dashboard/quarto-dashboard.js
+++ b/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");
     }
   }
 }
diff --git a/src/resources/formats/dashboard/quarto-dashboard.scss b/src/resources/formats/dashboard/quarto-dashboard.scss
index c18610c271..e11eca17b4 100644
--- a/src/resources/formats/dashboard/quarto-dashboard.scss
+++ b/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;
 }