Merge pull request #412 from PROCEED-Labs/fix-callstack-column-width-…

…resize

Fix for #410

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<ProcessManagementListProps> = ({
   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 (
     <BaseProcessList
       data={data}
@@ -410,10 +421,7 @@ const ProcessManagementList: FC<ProcessManagementListProps> = ({
       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) => ({

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();