Maintain loadflow parameters form actions buttons (#775)

Signed-off-by: Hugo Marcellin <[email protected]>

Author: Meklo

src/components/parameters/loadflow/load-flow-parameters-content.tsx

@@ -39,6 +39,11 @@ const styles = {
     maxWidth: {
         width: '100%',
     },
+    wrapper: {
+        flexGrow: 1,
+        overflow: 'auto',
+        paddingLeft: 1,
+    },
 };
 
 function LoadFlowParametersContent({
@@ -49,13 +54,7 @@ function LoadFlowParametersContent({
     defaultLimitReductions,
 }: Readonly<LoadFlowParametersContentProps>) {
     return (
-        <Box
-            sx={{
-                flexGrow: 1,
-                overflow: 'auto',
-                paddingLeft: 1,
-            }}
-        >
+        <Box sx={styles.wrapper}>
             <Grid container sx={styles.container}>
                 <Grid item sx={styles.maxWidth}>
                     <TabPanel value={selectedTab} index={TabValues.GENERAL}>

src/components/parameters/loadflow/load-flow-parameters-form.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box, LinearProgress } from '@mui/material';
+import { Box, Grid, LinearProgress, Theme } from '@mui/material';
 import { ReactNode } from 'react';
 import { UseLoadFlowParametersFormReturn } from './use-load-flow-parameters-form';
 import LoadFlowParametersHeader from './load-flow-parameters-header';
@@ -18,6 +18,32 @@ interface LoadFlowParametersFormProps {
     renderActions?: () => ReactNode;
 }
 
+const styles = {
+    form: {
+        height: '100%',
+        display: 'flex',
+        position: 'relative',
+        flexDirection: 'column',
+    },
+    loadflowParameters: {
+        flexGrow: 1,
+        paddingLeft: 1,
+        overflow: 'auto',
+    },
+    actions: {
+        flexGrow: 0,
+    },
+    content: (theme: Theme) => ({
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        maxHeight: 'calc(100% - 15vh)',
+        paddingRight: theme.spacing(2),
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(1),
+        flexGrow: 1,
+    }),
+};
+
 export function LoadFlowParametersForm({
     loadflowMethods,
     renderTitleFields,
@@ -39,42 +65,30 @@ export function LoadFlowParametersForm({
 
     return (
         <CustomFormProvider validationSchema={formSchema} {...formMethods} removeOptional>
-            {renderTitleFields?.()}
-            <Box
-                sx={{
-                    height: '100%',
-                    display: 'flex',
-                    position: 'relative',
-                    flexDirection: 'column',
-                }}
-            >
+            <Box sx={styles.form}>
+                {renderTitleFields?.()}
                 {paramsLoaded ? (
-                    <Box
-                        sx={{
-                            height: '100%',
-                            display: 'flex',
-                            position: 'relative',
-                            flexDirection: 'column',
-                        }}
-                    >
+                    <Box sx={styles.loadflowParameters}>
                         <LoadFlowParametersHeader
                             selectedTab={selectedTab}
                             handleTabChange={handleTabChange}
                             tabIndexesWithError={tabIndexesWithError}
                             formattedProviders={formattedProviders}
                         />
-                        <LoadFlowParametersContent
-                            selectedTab={selectedTab}
-                            currentProvider={currentProvider ?? ''}
-                            specificParameters={specificParameters}
-                            params={params}
-                            defaultLimitReductions={defaultLimitReductions}
-                        />
+                        <Grid container sx={styles.content}>
+                            <LoadFlowParametersContent
+                                selectedTab={selectedTab}
+                                currentProvider={currentProvider ?? ''}
+                                specificParameters={specificParameters}
+                                params={params}
+                                defaultLimitReductions={defaultLimitReductions}
+                            />
+                        </Grid>
                     </Box>
                 ) : (
                     <LinearProgress />
                 )}
-                {renderActions?.()}
+                {renderActions && <Box sx={styles.actions}>{renderActions?.()}</Box>}
             </Box>
         </CustomFormProvider>
     );