chore(*): Refactor tbody width calculations.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -6498,16 +6498,12 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         if (this.isPercentWidth) {
             /* width in %*/
-            const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width');
-            width = computed.indexOf('%') === -1 ? parseFloat(computed) : null;
+            const computed = this.document.defaultView.getComputedStyle(this.tbody.nativeElement).getPropertyValue('width');
+            width = parseFloat(computed);
         } else {
             width = parseInt(this.width, 10);
         }
 
-        if (!width && this.nativeElement) {
-            width = this.nativeElement.offsetWidth;
-        }
-
 
         if (this.width === null || !width) {
             this.isColumnWidthSum = true;
@@ -6516,9 +6512,6 @@ export abstract class IgxGridBaseDirective implements GridType,
             this.isColumnWidthSum = false;
         }
 
-        if (this.hasVerticalScroll() && this.width !== null) {
-            width -= this.scrollSize;
-        }
         if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
             this.calcWidth = width;
         }

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

@@ -34,7 +34,7 @@
     <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]="totalHeight" [style.width.px]="calcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
+        [style.height.px]="totalHeight" #tbody [attr.aria-activedescendant]="activeDescendant">
         @if (moving && columnInDrag && pinnedColumns.length <= 0) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"