From 81513d34dc3bf6c80313b2e38f50d1a6d6805280 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 5 Sep 2024 17:14:22 +0300
Subject: [PATCH] RED-9372: fixed table-items moving on hover.

---
 .../table-content/table-content.component.scss     | 14 +++++---------
 src/lib/listing/table/table.component.ts           | 11 +++++------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss
index 54d9cfa..3bf1d2d 100644
--- a/src/lib/listing/table-content/table-content.component.scss
+++ b/src/lib/listing/table-content/table-content.component.scss
@@ -2,7 +2,7 @@
 
 :host cdk-virtual-scroll-viewport {
     height: calc(100vh - 50px - 31px - var(--iqser-top-bar-height) - 50px);
-    overflow-y: hidden !important;
+    overflow-y: auto !important;
     background-color: var(--iqser-background);
     @include mixins.scroll-bar;
 
@@ -10,10 +10,6 @@
         display: none;
     }
 
-    &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: var(--gridTemplateColumnsHover);
-    }
-
     ::ng-deep.cdk-virtual-scroll-content-wrapper {
         grid-template-columns: var(--gridTemplateColumns);
         display: grid;
@@ -53,6 +49,10 @@
                 > * > div {
                     background-color: var(--iqser-not-disabled-table-item);
                 }
+
+                .scrollbar-placeholder {
+                    background-color: var(--iqser-side-nav);
+                }
             }
         }
     }
@@ -65,10 +65,6 @@
                 right: 0;
                 padding-right: 10px;
             }
-
-            .scrollbar-placeholder {
-                display: none !important;
-            }
         }
     }
 }
diff --git a/src/lib/listing/table/table.component.ts b/src/lib/listing/table/table.component.ts
index 0b08eac..e08afcf 100644
--- a/src/lib/listing/table/table.component.ts
+++ b/src/lib/listing/table/table.component.ts
@@ -87,18 +87,17 @@ export class TableComponent<Class extends IListable<PrimaryKey>, PrimaryKey exte
     }
 
     private _setColumnsWidth(element: HTMLElement) {
-        let gridTemplateColumnsHover = '';
+        let gridTemplateColumns = '';
         if (this.selectionEnabled) {
-            gridTemplateColumnsHover += '30px ';
+            gridTemplateColumns += '30px ';
         }
         for (const config of this.tableColumnConfigs) {
-            gridTemplateColumnsHover += `${config.width || '1fr'} `;
+            gridTemplateColumns += `${config.width || '1fr'} `;
         }
-        gridTemplateColumnsHover += this.emptyColumnWidth || '';
-        const gridTemplateColumns = `${gridTemplateColumnsHover} ${SCROLLBAR_WIDTH}px`;
+        gridTemplateColumns += this.emptyColumnWidth || '';
+        gridTemplateColumns = `${gridTemplateColumns} ${SCROLLBAR_WIDTH}px`;
 
         element.style.setProperty('--gridTemplateColumns', gridTemplateColumns);
-        element.style.setProperty('--gridTemplateColumnsHover', gridTemplateColumnsHover);
     }
 
     private _setItemSize(element: HTMLElement) {