Add @react-hook/size and use it to have a dynamic resizable list + update packages

src/Components/ElementsList/ElementsList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useSize from '@react-hook/size';
 import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../ContainerProperties/ContainerProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
@@ -116,6 +117,10 @@ function HandleOnDrop(
 }
 
 export function ElementsList(props: IElementsListProps): JSX.Element {
+  // States
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const [width, height] = useSize(divRef);
+
   // Render
   const it = MakeRecursionDFSIterator(props.mainContainer, 0, [0, 0], true);
   const containers = [...it];
@@ -164,12 +169,12 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
 
   return (
     <div className='h-full flex flex-col'>
-      <div className='h-48'>
+      <div ref={divRef} className='h-1/2'>
         <List
           className="List divide-y divide-black overflow-y-auto"
           itemCount={containers.length}
           itemSize={35}
-          height={192}
+          height={height}
           width={'100%'}
         >
           {Row}