From e0ca4cc3ccb73ee7fd8a0bbb078bd02cb90eb330 Mon Sep 17 00:00:00 2001
From: John White <750350+johnhwhite@users.noreply.github.com>
Date: Mon, 26 Sep 2022 14:06:04 -0400
Subject: [PATCH] Add css rules for
 .ag-body-horizontal-scroll.ag-scrollbar-invisible

---
 .../modules/ag-grid/ag-grid-wrapper.component.ts    | 13 +++++++++++--
 .../ag-grid/src/lib/styles/ag-grid-styles.scss      |  9 +++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts
index 0028d2ada7..86ef618791 100644
--- a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts
+++ b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts
@@ -167,10 +167,19 @@ export class SkyAgGridWrapperComponent implements AfterContentInit, OnDestroy {
         '.ag-body-horizontal-scroll'
       );
       if (header && floatingBottom && scrollbar) {
+        if (
+          scrollbar.style.height !==
+          scrollbar.style.getPropertyValue(
+            '--sky-ag-body-horizontal-scroll-width'
+          )
+        ) {
+          scrollbar.style.setProperty(
+            '--sky-ag-body-horizontal-scroll-width',
+            scrollbar.style.height
+          );
+        }
         const isTop = !!root.children[1].matches('.ag-body-horizontal-scroll');
         if (toTop && !isTop) {
-          // AG Grid detects whether the scrollbar takes up space, but we want to leave space for it regardless.
-          scrollbar.classList.remove('ag-scrollbar-invisible');
           const fragment = this.document.createDocumentFragment();
           fragment.appendChild(scrollbar);
           header.after(fragment);
diff --git a/libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss b/libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss
index 9098a8ddd9..7c225de07f 100644
--- a/libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss
+++ b/libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss
@@ -27,6 +27,7 @@ $sky-cell-wrap-text-line-height-modern: $sky-theme-modern-font-paragraph-line-he
 .sky-ag-grid.sky-ag-grid-top-scrollbar .ag-root {
   > .ag-body-viewport {
     .ag-center-cols-viewport {
+      /* Prevent a double scrollbar. */
       scrollbar-width: none;
 
       &::-webkit-scrollbar {
@@ -34,6 +35,14 @@ $sky-cell-wrap-text-line-height-modern: $sky-theme-modern-font-paragraph-line-he
       }
     }
   }
+  .ag-body-horizontal-scroll.ag-scrollbar-invisible {
+    /* Value is overridden in SkyAgGridWrapperComponent to match the calculated value AG Grid uses. */
+    --sky-ag-body-horizontal-scroll-width: 15px;
+    position: relative;
+    z-index: 1;
+    bottom: revert;
+    margin-bottom: calc(var(--sky-ag-body-horizontal-scroll-width) * -1);
+  }
 }
 
 ag-grid-angular:not(.sky-ag-grid-editable) {