From 4f8d2b253bab06afa3f86c9fc21cc51c14935d16 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.

Signed-off-by: FeRD (Frank Dana) <ferdnyc@gmail.com>
---
 .../index-desktop-sticky.scss                 | 22 +++++++++++++++++++
 .../browser-compatibility-table/index.scss    |  1 +
 2 files changed, 23 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..b93f39f82fdf
--- /dev/null
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-sticky.scss
@@ -0,0 +1,22 @@
+// Sticky BCD table headers, on sufficiently tall screens
+@use "../../../ui/vars" as *;
+
+@media (min-height: $screen-height-place-limit) {
+  .bc-table {
+    background-color: var(--background-primary);
+    position: relative;
+
+    thead {
+      --offset: var(--sticky-header-with-actions-height);
+      --thead-z-index: calc(var(--z-index-main-header) - 100);
+
+      position: sticky;
+      top: var(--offset);
+      z-index: var(--thead-z-index);
+    }
+  }
+
+  .table-container {
+    overflow: 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;