chore(*): Fix styles in case only 1 level of hierarchy exists.

Author: MKirova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -2881,6 +2881,15 @@
         flex-direction: column;
     }
 
+    %grid-thead--virtualizationWrapper {
+        height: 100%;
+    }
+
+    %grid-thead--virtualizationContainer {
+        overflow: visible;
+        height: 100%;
+    }
+
     %igx-grid__tr-pivot {
         display: flex;
         align-items: center;

projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss

@@ -77,6 +77,14 @@
         @include m(pivot) {
             @extend %grid-thead--pivot !optional;
         }
+
+        @include m(virtualizationWrapper) {
+            @extend %grid-thead--virtualizationWrapper !optional;
+        }
+
+        @include m(virtualizationContainer) {
+            @extend %grid-thead--virtualizationContainer !optional;
+        }
     }
 
     @include b(igx-grid-th) {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -162,14 +162,14 @@
                 </igx-grid-header-group>
             </ng-container>
         </ng-container>
-    <div [style.max-height.px]='maxContainerHeight'>
-        <div style='overflow:visible;' [style.height.px]='grid.rowHeight' class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>
+    <div class="igx-grid-thead--virtualizationWrapper" [style.max-height.px]='maxContainerHeight'>
+        <div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>
             <ng-template igxGridFor #headerVirtualContainer let-column
                 [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]="grid.parentVirtDir"
                 [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
                 [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
                 <igx-grid-header-group [ngClass]="column.headerGroupClasses"
-                [style.height.px]='calcHeight(column, i)'
+                [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'
                 [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                 [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts

@@ -91,7 +91,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     }
 
     public get maxContainerHeight() {
-        return this.totalDepth * this.grid.renderedRowHeight;
+        return this.totalDepth > 1 ? this.totalDepth * this.grid.renderedRowHeight : undefined;
     }
 
     public calcHeight(col: ColumnType, index: number) {