fix(column-pinning): hide vertical divider if no horizontal scroll

also fix divider not showing on pinned header columns with horizontal scroll

Author: chintankavathia

playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--check-resize-attribute-chromium-linux.png

@@ -78,6 +78,7 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
         [scrollbarH]="scrollbarH"
         [scrollHeight]="scrollHeight()"
         [scrollWidth]="columnGroupWidths?.total"
+        [class.horizontal-overflow]="innerWidth < (columnGroupWidths?.total ?? 0)"
         (scroll)="onBodyScroll($event)"
       >
         @if (summaryRow && summaryPosition === 'top') {

playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--pinning-name-and-state-column-chromium-linux.png

@@ -46,6 +46,7 @@ import { DataTableHeaderCellComponent } from './header-cell.component';
       role="row"
       orderable
       class="datatable-header-inner"
+      [class.horizontal-overflow]="innerWidth < _columnGroupWidths.total"
       [style.width.px]="_columnGroupWidths.total"
       (reorder)="onColumnReordered($event)"
       (targetChanged)="onTargetChanged($event)"

playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--resize-name-column-chromium-linux.png

@@ -201,18 +201,20 @@ $datatble-ghost-cell-animation-duration: 10s;
 	 */
   .datatable-header,
   .datatable-body {
-    .datatable-row-left {
-      background-color: $ngx-datatable-background;
-      background-position: 100% 0;
-      background-repeat: repeat-y;
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==');
-    }
+    .horizontal-overflow {
+      .datatable-row-left {
+        background-color: $ngx-datatable-background;
+        background-position: 100% 0;
+        background-repeat: repeat-y;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==');
+      }
 
-    .datatable-row-right {
-      background-position: 0 0;
-      background-color: $ngx-datatable-background;
-      background-repeat: repeat-y;
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==');
+      .datatable-row-right {
+        background-position: 0 0;
+        background-color: $ngx-datatable-background;
+        background-repeat: repeat-y;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==');
+      }
     }
   }
 
@@ -222,13 +224,17 @@ $datatble-ghost-cell-animation-duration: 10s;
   .datatable-header {
     border-block-end: 1px solid $datatable-header-border-bottom-color;
 
+    .datatable-row-left,
+    .datatable-row-right {
+      background-color: $datatable-header-cell-background;
+    }
+
     .datatable-header-cell {
       flex-shrink: 0;
       text-align: start;
       padding-block: 0.9rem;
       padding-inline: 1.2rem;
       font-weight: 400;
-      background-color: $datatable-header-cell-background;
       color: $datatable-header-cell-color;
       vertical-align: bottom;
       font-size: 12px;