From 21d9b1f21d042df9a4e90871078101588dac0cef Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Thu, 28 Nov 2024 01:08:49 -0500
Subject: [PATCH] fix: add "frozen" class to all slick-pane for easier styling

---
 packages/common/src/core/slickGrid.ts      | 10 ++++++++++
 packages/common/src/styles/_variables.scss |  3 ---
 packages/common/src/styles/slick-grid.scss | 16 +---------------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts
index 826881596..b93f81d58 100755
--- a/packages/common/src/core/slickGrid.ts
+++ b/packages/common/src/core/slickGrid.ts
@@ -875,6 +875,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       this.setFrozenOptions();
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setScroller();
       this.setOverflow();
@@ -2285,6 +2286,14 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
   }
 
+  /** add/remove frozen class to left headers/footer when defined */
+  protected setPaneFrozenClasses(): void {
+    const classAction = this.hasFrozenColumns() ? 'add' : 'remove';
+    for (const elm of [this._paneHeaderL, this._paneTopL, this._paneBottomL]) {
+      elm.classList[classAction]('frozen');
+    }
+  }
+
   protected setPaneVisibility(): void {
     if (this.hasFrozenColumns()) {
       Utils.show(this._paneHeaderR);
@@ -3017,6 +3026,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.updateColumnCaches();
 
     if (this.initialized) {
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setOverflow();
       this.invalidateAllRows();
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 256af1642..fd33b80f4 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -174,9 +174,6 @@ $slick-header-scroll-width-to-remove:                       16px !default;
 /* Frozen pinned rows/columns */
 $slick-frozen-border-bottom:                                1px solid #a5a5a5 !default;
 $slick-frozen-border-right:                                 1px solid #a5a5a5 !default;
-$slick-frozen-preheader-row-border-right:                   $slick-frozen-border-right !default;
-$slick-frozen-header-row-border-right:                      $slick-frozen-border-right !default;
-$slick-frozen-filter-row-border-right:                      $slick-frozen-border-right !default;
 $slick-frozen-overflow-right:                               scroll !default;                      // typically we would like to always have the scroll displayed when using hamburger menu (top right)
 
 /* icons */
diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
index 5ba20cef6..88a4592c8 100644
--- a/packages/common/src/styles/slick-grid.scss
+++ b/packages/common/src/styles/slick-grid.scss
@@ -758,23 +758,9 @@
   }
 
   /** Frozen/Pinned styling */
-
-  .slick-row .slick-cell.frozen:last-child,
-  .slick-footerrow-column.frozen:last-child {
+  .slick-pane-left.frozen {
     border-right: var(--slick-frozen-border-right, v.$slick-frozen-border-right);
   }
-  .slick-header-column.frozen:last-child {
-    border-right: var(--slick-frozen-header-row-border-right, v.$slick-frozen-header-row-border-right);
-  }
-  .slick-pane-left {
-    .slick-preheader-panel .slick-header-column.frozen:last-child,
-    .slick-topheader-panel .slick-header-column.frozen:last-child {
-      border-right: var(--slick-frozen-preheader-row-border-right, v.$slick-frozen-preheader-row-border-right);
-    }
-  }
-  .slick-headerrow-column.frozen:last-child {
-    border-right: var(--slick-frozen-filter-row-border-right, v.$slick-frozen-filter-row-border-right);
-  }
 
   .slick-pane-bottom {
     border-top: var(--slick-frozen-border-bottom, v.$slick-frozen-border-bottom);