From e19f91215db51df92fdb1bc749de34a13498e09f Mon Sep 17 00:00:00 2001
From: "FeRD (Frank Dana)" <ferdnyc@gmail.com>
Date: Fri, 21 Jun 2024 01:15:10 -0400
Subject: [PATCH] Sticky headers for BCD table, on desktop

On desktop with sufficient browser height (determined by a media
query on `(min-height: $screen-height-place-limit)`), make the
headers of the BCD table sticky against the bottom of the sticky
page header.
---
 .../index-desktop-sticky.scss                 | 23 +++++++++++++++++++
 .../browser-compatibility-table/index.scss    |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 client/src/document/ingredients/browser-compatibility-table/index-desktop-sticky.scss

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-sticky.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-sticky.scss
new file mode 100644
index 000000000000..da0087d5e604
--- /dev/null
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-sticky.scss
@@ -0,0 +1,23 @@
+// Sticky BCD table headers, on sufficiently tall screens
+@use "../../../ui/vars" as *;
+
+@media (min-height: $screen-height-place-limit) {
+  .bc-table {
+    position: relative;
+
+    thead {
+      --offset: var(--sticky-header-with-actions-height);
+      --thead-z-index: calc(var(--z-index-main-header) - 100);
+      background-color: var(--background-primary);
+
+      position: sticky;
+      top: var(--offset);
+      z-index: var(--thead-z-index);
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+    overflow-y: visible;
+  }
+}
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index be464957aaeb..d57df365703b 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -387,6 +387,7 @@ dl.bc-notes-list {
 @import "./index-desktop";
 @import "./index-desktop-md";
 @import "./index-desktop-xl";
+@import "./index-desktop-sticky";
 
 .bcd-cell-text-wrapper {
   display: flex;