PivotGrid: fix data area width for virtual scrolling (T1290313) (#30321)

Co-authored-by: Vladimir Bushmanov <vladimir.bushmanov@devexpress.com>

Author: Ambrozy

e2e/testcafe-devextreme/tests/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=false (generic-light).png

@@ -1,6 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
-import { insertStylesheetRulesToPage } from '../../helpers/domUtils';
+import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../helpers/domUtils';
 import { isMaterialBased, testScreenshot } from '../../helpers/themeUtils';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
@@ -139,6 +139,54 @@ testFixture()`PivotGrid_scrolling`
   });
 });
 
+generateOptionMatrix({
+  height: [450, 350],
+  useNative: [false, true],
+}).forEach(({ height, useNative }) => {
+  test(`Rows content dont hide under vertical scrollbar when scrolling{useNative=${useNative}},height=100% (${height}px) (T1290313)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    await testScreenshot(
+      t,
+      takeScreenshot,
+      `PivotGrid rows content height=100%(${height}px),useNative=${useNative}.png`,
+      { element: '#container' },
+    );
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await insertStylesheetRulesToPage(`#parentContainer { height: ${height}px; }`);
+
+    return createWidget('dxPivotGrid', {
+      height: '100%',
+      showBorders: true,
+      scrolling: {
+        useNative,
+        mode: 'standard',
+      },
+      dataSource: {
+        fields: [{
+          dataField: 'rowField',
+          area: 'row',
+        }, {
+          dataField: 'dataField',
+          area: 'data',
+        }, {
+          dataField: 'dataField',
+          area: 'data',
+        }],
+        store: Array.from({ length: 9 }).map((_, id) => ({
+          id,
+          rowField: id > 7 ? 'row '.repeat(id) : `row ${id}`,
+          dataField: 47,
+        })),
+      },
+    });
+  }).after(async () => {
+    await removeStylesheetRulesFromPage();
+  });
+});
+
 generateOptionMatrix({
   rtlEnabled: [false, true],
   nativeScrolling: [false, true],

e2e/testcafe-devextreme/tests/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=true (generic-light).png

@@ -1249,6 +1249,7 @@ const PivotGrid = (Widget as any).inherit({
       const descriptionCellHeight = getOuterHeight(descriptionCell[0], true)
         + (needSynchronizeFieldPanel ? rowHeights[0] : 0);
 
+      const dataAreaHeadHeight = getHeight(that._dataArea.headElement());
       let filterAreaHeight = 0;
       let dataAreaHeight = 0;
       if (that._hasHeight) {
@@ -1262,7 +1263,7 @@ const PivotGrid = (Widget as any).inherit({
           that.$element(),
         ) - filterAreaHeight - dataHeaderHeight
           - (Math.max(
-            getHeight(that._dataArea.headElement()),
+            dataAreaHeadHeight,
             getHeight(columnAreaCell),
             descriptionCellHeight,
           )
@@ -1271,7 +1272,12 @@ const PivotGrid = (Widget as any).inherit({
       }
 
       const scrollBarWidth = that._dataArea.getScrollbarWidth();
-      const correctDataTableHeight = getHeight(that._dataArea.tableElement()) - getHeight(that._dataArea.headElement());
+      const rowsAreaTableHeight = getHeight(that._rowsArea.tableElement());
+      const dataAreaTableHeight = getHeight(that._dataArea.tableElement());
+      const correctDataTableHeight = Math.max(
+        rowsAreaTableHeight,
+        dataAreaTableHeight - dataAreaHeadHeight,
+      );
       const hasVerticalScrollbar = calculateHasScroll(dataAreaHeight, correctDataTableHeight);
 
       that._dataArea.tableElement().css({