fix: more fluid, bigger minimum size (#2789)

Signed-off-by: LE SAULNIER Kevin <[email protected]>

Author: klesaulnier

src/components/graph/menus/network-modifications/network-modifications-table.tsx

@@ -125,7 +125,6 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                 cellRendererParams: {
                     setModifications: setModifications,
                 },
-                maxWidth: 60,
                 width: 60,
             },
         ];
@@ -142,8 +141,7 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                       },
                       cellStyle: { textAlign: 'center' },
                       headerStyle: { padding: 0 },
-                      maxWidth: 72,
-                      minWidth: 72,
+                      width: 72,
                       headerComponent: () =>
                           isCurrentRootNetwork && (
                               <Box

src/components/network-modification-tree-pane-panels.tsx

@@ -30,21 +30,25 @@ export const NetworkModificationTreePanePanels = ({
     rightComponent,
     showRightPanel = true,
 }: NetworkModificationTreePanePanelsProps) => {
+    const MINIMUM_RIGHT_PANEL_SIZE = 380;
+    const PADDING_BY_ROOT_NETWORK = 72;
+
     // necessary to get container size in order to calculate % sizes from px
     const containerRef = useRef<HTMLDivElement>(null);
     // necessary to programatically resize layout
     const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
     const rootNetworks = useSelector((state: AppState) => state.rootNetworks);
 
-    const rightComponentDefaultSizePixel = 320 + rootNetworks.length * 80;
+    const rightComponentDefaultSizePixel =
+        MINIMUM_RIGHT_PANEL_SIZE - PADDING_BY_ROOT_NETWORK / 2 + rootNetworks.length * PADDING_BY_ROOT_NETWORK;
 
     // we want to set sizes in pixel, but Panel only deals with sizes in %
     // this makes the conversion, and handle the resizing when the layout is updated
     const { rightPanelPercentSize, rightComponentMinSizePercentage, onDragging } = usePanelsSize({
         containerRef: containerRef,
         panelGroupRef: panelGroupRef,
         rightComponentDefaultSizePixel: rightComponentDefaultSizePixel,
-        rightComponentMinSizePixel: 350,
+        rightComponentMinSizePixel: MINIMUM_RIGHT_PANEL_SIZE,
         showRightPanel: showRightPanel,
     });
 

src/components/network-modification-tree-pane.jsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     networkModificationTreeNodeAdded,
     networkModificationTreeNodeMoved,
@@ -545,24 +545,34 @@ export const NetworkModificationTreePane = ({ studyUuid, studyMapTreeDisplay, cu
         [studyUuid, dispatch, snackError]
     );
 
+    const networkModificationTreeComponent = useMemo(
+        () => (
+            <NetworkModificationTree
+                onNodeContextMenu={onNodeContextMenu}
+                studyUuid={studyUuid}
+                studyMapTreeDisplay={studyMapTreeDisplay}
+                isStudyDrawerOpen={isStudyDrawerOpen}
+                prevTreeDisplay={prevTreeDisplay}
+            />
+        ),
+        [studyUuid, onNodeContextMenu, studyMapTreeDisplay, isStudyDrawerOpen, prevTreeDisplay]
+    );
+
+    const networkModificationPanelComponent = useMemo(
+        () => (
+            <>
+                {isModificationsDrawerOpen && <NodeEditor />}
+                {isEventScenarioDrawerOpen && <ScenarioEditor />}
+            </>
+        ),
+        [isModificationsDrawerOpen, isEventScenarioDrawerOpen]
+    );
+
     return (
         <>
             <NetworkModificationTreePanePanels
-                leftComponent={
-                    <NetworkModificationTree
-                        onNodeContextMenu={onNodeContextMenu}
-                        studyUuid={studyUuid}
-                        studyMapTreeDisplay={studyMapTreeDisplay}
-                        isStudyDrawerOpen={isStudyDrawerOpen}
-                        prevTreeDisplay={prevTreeDisplay}
-                    />
-                }
-                rightComponent={
-                    <>
-                        {isModificationsDrawerOpen && <NodeEditor />}
-                        {isEventScenarioDrawerOpen && <ScenarioEditor />}
-                    </>
-                }
+                leftComponent={networkModificationTreeComponent}
+                rightComponent={networkModificationPanelComponent}
                 showRightPanel={isModificationsDrawerOpen || isEventScenarioDrawerOpen}
             />
             {createNodeMenu.display && (