diff --git a/src/management-system-v2/components/process-list.tsx b/src/management-system-v2/components/process-list.tsx index 36a24c39f..4862146e3 100644 --- a/src/management-system-v2/components/process-list.tsx +++ b/src/management-system-v2/components/process-list.tsx @@ -9,6 +9,8 @@ import { SetStateAction, Key, ReactElement, + useEffect, + useState, } from 'react'; import { CopyOutlined, @@ -35,6 +37,7 @@ import FavouriteStar from './favouriteStar'; import { contextMenuStore } from './processes/context-menu'; import { DraggableElementGenerator } from './processes/draggable-element'; import classNames from 'classnames'; +import { set } from 'zod'; /** respects sorting function, but always keeps folders at the beginning */ function folderAwareSort(sortFunction: (a: ProcessListProcess, b: ProcessListProcess) => number) { @@ -400,6 +403,14 @@ const ProcessManagementList: FC = ({ const setContextMenuItem = contextMenuStore((store) => store.setSelected); const metaPanelisOpened = useUserPreferences.use['process-meta-data']().open; + const [scrollY, setScrollY] = useState('400px'); + useEffect(() => { + if (window) + setScrollY( + `${window.innerHeight - 32 /* Footer */ - 64 /* Header */ - 82 /* Table-Search etc */ - 60 /* Table-head */ - 60 /* Table-Footer / Pagination */}px`, + ); + }, []); + return ( = ({ processActions={processActions} tableProps={{ scroll: { - y: - typeof window !== 'undefined' && window.innerHeight > 0 - ? `${window?.innerHeight - 32 /* Footer */ - 64 /* Header */ - 82 /* Table-Search etc */ - 60 /* Table-head */ - 60 /* Table-Footer / Pagination */}px` - : undefined, + y: scrollY, }, pagination: { position: ['bottomCenter'], pageSize: 20 }, onRow: (item) => ({ diff --git a/src/management-system-v2/lib/useColumnWidth.tsx b/src/management-system-v2/lib/useColumnWidth.tsx index ba044eb2d..068ce2819 100644 --- a/src/management-system-v2/lib/useColumnWidth.tsx +++ b/src/management-system-v2/lib/useColumnWidth.tsx @@ -30,7 +30,7 @@ export const useResizeableColumnWidth = ( const initialisedWithHydratedValues = useRef( false, - ); /* Basically a switch to check whther the state was updated once with the saved values, once hydrated */ + ); /* Basically a switch to check whether the state was updated once with the saved values, once hydrated */ const convertedWidthsToNumbers = useRef(false); /* Similar switch */ const computeNewColumns = useCallback(() => { @@ -58,13 +58,13 @@ export const useResizeableColumnWidth = ( initialisedWithHydratedValues.current = true; // console.debug('Updated columns with hydrated values'); setResizeableColumns(newColumns); - }, [hydrated, computeNewColumns, initialisedWithHydratedValues.current]); + }, [hydrated, computeNewColumns]); /* If the user selects different columns (i.e. columnsInPreferences change) update the state with new columns */ useEffect(() => { if (!hydrated) return; - /* This should onl run if the length of the arrays is dfferent */ + /* This should only run if the length of the arrays is dfferent */ if (columnsInPreferences.length === resizeableColumns.length) return; const newColumns = computeNewColumns();