chore(*): Fix pivot grid width calculations and remove some fixed px sizes.

Author: MKirova

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

@@ -1303,14 +1303,14 @@
         overflow: hidden;
         z-index: 1;
         outline-style: none;
+        flex-grow: 1;
     }
 
     %grid-tbody-container {
         position: relative;
-        display: grid;
+        display: flex;
         grid-row: 4;
         overflow: hidden;
-        grid-template-rows: 1fr;
     }
 
     %grid-tbody-message {
@@ -2086,7 +2086,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-	        
+
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2114,15 +2114,15 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
-	                
+
 	                > igx-icon {
 		                color: inherit;
 	                }
@@ -2179,14 +2179,14 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
-	        
+
 	        > igx-icon {
 		        color: inherit;
 	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }

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

@@ -2517,4 +2517,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.regroupTrigger++;
         }
     }
+
+    protected override getUnpinnedWidth(takeHidden = false) {
+            return this.isPercentWidth ?
+            this.calcWidth :
+            super.getUnpinnedWidth(takeHidden);
+    }
 }

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

@@ -1,6 +1,6 @@
-<div>
-    <div class="igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot" role="row" [style.width.px]="width">
-        <div class="igx-grid__tr" role="row" [style.width.px]="width">
+<div [style.width]="'100%'">
+    <div class="igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot" role="row" [style.width]="'100%'">
+        <div class="igx-grid__tr" role="row" [style.width]="'100%'">
             <div class='igx-grid__tr-pivot--filter-container'>
                 @if (grid.pivotUI.showConfiguration) {
                     <div #pivotFilterContainer
@@ -193,14 +193,14 @@
             </div>
         </div>
     </div>
-    <div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
+    <div role="rowgroup" class="igx-grid-thead__wrapper" [style.width]="'100%'"
          [attr.aria-activedescendant]="activeDescendant" [class.igx-grid__tr--mrl]="hasMRL">
 
         <!-- Column headers area -->
-        <div class="igx-grid__tr" role="row" [style.width.px]="width">
+        <div class="igx-grid__tr" role="row" [style.width]="'100%'">
             @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {
                 <div #pivotContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--row-area"
-                    [style.width.px]="grid.pivotRowWidths - 1" (igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop
+                    [style.min-width.px]="grid.pivotRowWidths - 1" (igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop
                     (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()">
                     <!-- Row area -->
                     <igx-chips-area #rowArea droppable='true'>