perf(table): фиксированная высота строк вместо measureElement (лист, свод 1, свод 2)

Высота строки и ячейки задана явно в rem, виртуализатор не читает offsetHeight.
Мёртвая muiTableRowProps удалена. Overscan строк свода 2: 8 -> 3.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -16,7 +16,8 @@ import { CreateProgramModal } from './Modals/CreateProgramProjectModal';
 import { SelectExpenseItemModal } from './Modals/SelectExpenseItemModal';
 import { SelectVspModal } from './Modals/SelectVspModal';
 import { additionExpenseRowTable, additionVspRowTable } from './constants/addingRowConfig';
-import { BASE_TABLE_CONFIG, TABLE_ROW_HEIGHT, getTableBodyCellProps, getTablePaperStyles } from './constants/tableConfig';
+import { BASE_TABLE_CONFIG, TABLE_ROW_HEIGHT, getTableBodyCellProps, getTablePaperStyles, getTableRowHeightPx } from './constants/tableConfig';
+import { createFixedRowVirtualizerOptions } from './utils/virtualizerOptions';
 import { useRealtimeActions, useVspOptions } from './contexts/RealtimeContext';
 import { useColumnSettings } from './hooks/useColumnSettings';
 import { useHeaderPortal } from './hooks/useHeaderPortal';
@@ -34,13 +35,11 @@ import useDenomination from '../common/useDenomination';
 
 const CONFIG_CACHE = new Map();
 
-const ROW_VIRTUALIZER_OPTIONS = {
+const ROW_VIRTUALIZER_OPTIONS = createFixedRowVirtualizerOptions({
+	rowHeight: getTableRowHeightPx,
 	overscan: 5,
-	scrollPaddingStart: 0,
+	extra: { scrollPaddingStart: 0, scrollPaddingEnd: 0 },
-	scrollPaddingEnd: 0,
+});
-	estimateSize: () => TABLE_ROW_HEIGHT,
-	measureElement: (element) => element?.offsetHeight || TABLE_ROW_HEIGHT,
-};
 
 const hasVspDropdown = (columns) =>
 	columns.some((column) => column.editType === 'vsp_dropdown' || (column.columns?.length && hasVspDropdown(column.columns)));
@@ -362,6 +361,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		muiTableBodyRowProps: ({ row }) => ({
 			onClick: () => handleClickRowCell(row.id),
 			hover: false,
+			style: { height: TABLE_ROW_HEIGHT },
 			sx: {
 				'& > td::after': {
 					content: row.getIsSelected() ? '""' : 'none',

web/src/components/RealtimeTable/constants/tableConfig.js

@@ -1,9 +1,14 @@
-export const TABLE_ROW_HEIGHT = 80;
+import { getRootFontSizePx } from '../utils/virtualizerOptions';
+
+// Высота строки листа = 3rem (так было фактически: minHeight/maxHeight ячейки).
+// rem зависит от ширины окна (App.css: .83vw при ширине <= 1920px), поэтому в px высота
+// вычисляется в момент вызова. Виртуализатор строк не читает layout (measureElement = константа),
+// значит стили строки/ячейки и эта высота обязаны совпадать.
+export const TABLE_ROW_HEIGHT_REM = 3;
+export const TABLE_ROW_HEIGHT = `${TABLE_ROW_HEIGHT_REM}rem`;
+export const getTableRowHeightPx = () => TABLE_ROW_HEIGHT_REM * getRootFontSizePx();
 
 export const BASE_TABLE_CONFIG = {
-	muiTableRowProps: {
-		sx: { height: '5rem' },
-	},
 	enableExpanding: true,
 	enableStickyHeader: true,
 	enableColumnPinning: true,
@@ -40,8 +45,8 @@ export const getTableHeadCellStyles = () => ({
 		whiteSpace: 'auto',
 		wordBreak: 'normal',
 		boxSizing: 'border-box',
-		minHeight: '3rem',
+		minHeight: TABLE_ROW_HEIGHT,
-		maxHeight: '3rem',
+		maxHeight: TABLE_ROW_HEIGHT,
 		border: '1px solid #E6E6E6',
 		fontSize: '11px',
 		fontFamily: 'Calibri, Arial, sans-serif',
@@ -56,6 +61,8 @@ export const getTableBodyCellProps = ({ column, table }) => {
 		sx: {
 			...getTableHeadCellStyles().sx,
 			fontSize: '1rem',
+			height: TABLE_ROW_HEIGHT,
+			overflow: 'hidden',
 			...(isPinned && { zIndex: 5 }),
 		},
 	};

web/src/pages/Svod2Page/Svod2Page.jsx

@@ -9,6 +9,7 @@ import { HeaderSwitch } from '../../components/HeaderMenu/HeaderSwitch';
 import { PrimaryButton } from '../../components/common/Buttons/Buttons';
 import DenominationSelect from '../../components/common/DenominationSelect';
 import useDenomination from '../../components/common/useDenomination';
+import { createFixedRowVirtualizerOptions, getRootFontSizePx } from '../../components/RealtimeTable/utils/virtualizerOptions';
 import { useSvod } from '../SvodPage/SvodContext';
 import { SvodFilters } from '../SvodPage/SvodFilters';
 
@@ -21,12 +22,13 @@ const createInitialTableState = () =>
 const QUARTERS = [1, 2, 3, 4];
 const tableSize = (rem) => rem * 16;
 const numberFormatter = new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 2 });
-const ROW_HEIGHT = 37;
+// Высота строки задана в rem явно (строка и ячейка), виртуализатор layout не читает.
-const ROW_VIRTUALIZER_OPTIONS = {
+const ROW_HEIGHT_REM = 2.75;
-	overscan: 8,
+const ROW_HEIGHT = `${ROW_HEIGHT_REM}rem`;
-	estimateSize: () => ROW_HEIGHT,
+const ROW_VIRTUALIZER_OPTIONS = createFixedRowVirtualizerOptions({
-	measureElement: (element) => element?.offsetHeight || ROW_HEIGHT,
+	rowHeight: () => ROW_HEIGHT_REM * getRootFontSizePx(),
-};
+	overscan: 3,
+});
 const COLUMN_BAND_COLORS = {
 	head: ['#f8f9fa', '#f1f7f3'],
 	body: ['#ffffff', '#f8fbf9'],
@@ -532,8 +534,12 @@ export default function Svod2Page() {
 			},
 		}),
 		muiTableHeadRowProps: { sx: { boxShadow: 'none' } },
+		muiTableBodyRowProps: { style: { height: ROW_HEIGHT } },
 		muiTableBodyCellProps: ({ column }) => ({
 			sx: {
+				boxSizing: 'border-box',
+				height: ROW_HEIGHT,
+				overflow: 'hidden',
 				backgroundColor: COLUMN_BAND_COLORS.body[columnBands.get(column.id) ?? 0],
 				borderRight: columnGroupEnds.has(column.id) ? '0.1875rem solid #9eafa3' : '0.0625rem solid #edf0f2',
 				fontSize: '0.8125rem',

web/src/pages/SvodPage/SummaryTable.jsx

@@ -5,13 +5,16 @@ import useDenomination from '../../components/common/useDenomination';
 import { blueColumn, greenColumn, orangeColumn } from '../../components/RealtimeTable/constants/columnColors';
 import { sectionCodeColor } from '../../components/RealtimeTable/constants/columnConfig';
 import { buildRowHierarchy } from '../../components/RealtimeTable/utils/rowUtils';
+import { createFixedRowVirtualizerOptions, getRootFontSizePx } from '../../components/RealtimeTable/utils/virtualizerOptions';
 
 const tableSize = (rem) => rem * 16;
-const ROW_VIRTUALIZER_OPTIONS = {
+// Высота строки задана в rem явно (строка и ячейка), виртуализатор layout не читает.
+const ROW_HEIGHT_REM = 2.25;
+const ROW_HEIGHT = `${ROW_HEIGHT_REM}rem`;
+const ROW_VIRTUALIZER_OPTIONS = createFixedRowVirtualizerOptions({
+	rowHeight: () => ROW_HEIGHT_REM * getRootFontSizePx(),
 	overscan: 8,
-	estimateSize: () => 37,
+});
-	measureElement: (element) => element?.offsetHeight || 37,
-};
 
 const SOURCE_COLORS = { ahr: greenColumn, oper: blueColumn, cap: orangeColumn };
 
@@ -157,6 +160,7 @@ export const SummaryTable = memo(function SummaryTable({ columns, data, loading,
 				boxShadow: 'none',
 			},
 		},
+		muiTableBodyRowProps: { style: { height: ROW_HEIGHT } },
 		muiTableBodyCellProps: ({ row, column }) => {
 			const backgroundColor = getSummaryRowColor(row, colorBySource);
 			return {
@@ -167,6 +171,9 @@ export const SummaryTable = memo(function SummaryTable({ columns, data, loading,
 					fontSize: '0.8125rem',
 					px: column.id === 'mrt-row-expand' ? '0.25rem' : '0.75rem',
 					py: column.id === 'mrt-row-expand' ? 0 : '0.5rem',
+					boxSizing: 'border-box',
+					height: ROW_HEIGHT,
+					overflow: 'hidden',
 					whiteSpace: 'nowrap',
 					textAlign: ['section_code', 'name'].includes(column.id) ? 'left' : 'right',
 				},