From f76d35ddb095a754e61e15381174ae2cad5f6b16 Mon Sep 17 00:00:00 2001
From: colemanw <coleman@civicrm.org>
Date: Wed, 24 May 2023 10:47:03 -0400
Subject: [PATCH] SearchKit - Add sticky table header style

---
 .../displays/searchAdminDisplayTable.component.js            | 3 ++-
 ext/search_kit/css/crmSearchDisplayTable.css                 | 5 +++++
 js/crm.menubar.js                                            | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
index b31260e9f8..759b2afafb 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
@@ -19,7 +19,8 @@
       this.tableClasses = [
         {name: 'table', label: ts('Row Borders')},
         {name: 'table-bordered', label: ts('Column Borders')},
-        {name: 'table-striped', label: ts('Even/Odd Stripes')}
+        {name: 'table-striped', label: ts('Even/Odd Stripes')},
+        {name: 'crm-sticky-header', label: ts('Sticky Header')}
       ];
 
       // Check if array contains item
diff --git a/ext/search_kit/css/crmSearchDisplayTable.css b/ext/search_kit/css/crmSearchDisplayTable.css
index 12ddb19010..331e8bebb1 100644
--- a/ext/search_kit/css/crmSearchDisplayTable.css
+++ b/ext/search_kit/css/crmSearchDisplayTable.css
@@ -12,3 +12,8 @@
 #bootstrap-theme .crm-search-display.crm-search-display-table tfoot > tr > td {
   font-weight: bold;
 }
+
+table.crm-sticky-header > thead > tr {
+  position: sticky !important;
+  top: var(--crm-menubar-bottom, 0px);
+}
diff --git a/js/crm.menubar.js b/js/crm.menubar.js
index 9cfa4caeac..f6d1bb9cba 100644
--- a/js/crm.menubar.js
+++ b/js/crm.menubar.js
@@ -101,11 +101,13 @@
       if (typeof speed === 'number') {
         $('#civicrm-menu').slideDown(speed, function() {
           $(this).css('display', '');
+          handleResize();
         });
       }
       $('body')
         .removeClass('crm-menubar-hidden')
         .addClass('crm-menubar-visible');
+      handleResize();
     },
     hide: function(speed, showMessage) {
       if (typeof speed === 'number') {
@@ -116,6 +118,7 @@
       $('body')
         .addClass('crm-menubar-hidden')
         .removeClass('crm-menubar-visible');
+      document.documentElement.style.setProperty('--crm-menubar-bottom', '0px');
       if (showMessage === true && $('#crm-notification-container').length && initialized) {
         var alert = CRM.alert('<a href="#" id="crm-restore-menu" >' + _.escape(ts('Restore CiviCRM Menu')) + '</a>', ts('Menu hidden'), 'none', {expires: 10000});
         $('#crm-restore-menu')
@@ -503,6 +506,7 @@
     } else {
       $('body').removeClass('crm-menubar-wrapped');
     }
+    document.documentElement.style.setProperty('--crm-menubar-bottom', ($('#civicrm-menu').height() + $('#civicrm-menu').position().top) + 'px');
   }
 
   // Figure out if we've hit the mobile breakpoint, based on the rule in crm-menubar.css
-- 
2.25.1