From 1b8aa01a499feffac338858f41fdaad33f65c732 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Thu, 1 Feb 2024 12:15:13 +0100
Subject: [PATCH] feat(ui-hydro): update Inflow Structure form style

---
 .../Areas/Hydro/InflowStructure/index.tsx     | 70 ++++++++-----------
 .../Areas/Hydro/SplitHydroMatrix.tsx          |  7 +-
 2 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
index 57402941a3..d5f38785b8 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
@@ -10,7 +10,6 @@ import {
 } from "./utils";
 import NumberFE from "../../../../../../../common/fieldEditors/NumberFE";
 import { SubmitHandlerPlus } from "../../../../../../../common/Form/types";
-import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 function InflowStructure() {
@@ -31,48 +30,37 @@ function InflowStructure() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "row",
-        width: 1,
+    <Form
+      key={study.id + areaId}
+      config={{
+        defaultValues: () => getInflowStructureFields(study.id, areaId),
       }}
+      onSubmit={handleSubmit}
+      miniSubmitButton
+      enableUndoRedo
+      sx={{ display: "flex", alignItems: "center", ".Form__Footer": { p: 0 } }}
     >
-      <Form
-        key={study.id + areaId}
-        config={{
-          defaultValues: () => getInflowStructureFields(study.id, areaId),
-        }}
-        onSubmit={handleSubmit}
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          py: 1,
-        }}
-        enableUndoRedo
-      >
-        {({ control }) => (
-          <NumberFE
-            label="Inter-Monthly Correlation"
-            name="interMonthlyCorrelation"
-            control={control}
-            fullWidth
-            rules={{
-              min: {
-                value: 0,
-                message: t("form.field.minValue", { 0: 0 }),
-              },
-              max: {
-                value: 1,
-                message: t("form.field.maxValue", { 0: 1 }),
-              },
-            }}
-            inputProps={{ step: 0.1 }}
-          />
-        )}
-      </Form>
-    </Box>
+      {({ control }) => (
+        <NumberFE
+          label="Inter-Monthly Correlation"
+          name="interMonthlyCorrelation"
+          control={control}
+          rules={{
+            min: {
+              value: 0,
+              message: t("form.field.minValue", { 0: 0 }),
+            },
+            max: {
+              value: 1,
+              message: t("form.field.maxValue", { 0: 1 }),
+            },
+          }}
+          inputProps={{ step: 0.1 }}
+          size="small"
+          sx={{ width: 180 }}
+        />
+      )}
+    </Form>
   );
 }
 
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix.tsx
index 685ef372ad..484ad0a87e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@mui/material";
 import SplitView, { SplitViewProps } from "../../../../../../common/SplitView";
 import HydroMatrix from "./HydroMatrix";
 import { HydroMatrixType } from "./utils";
@@ -12,7 +13,11 @@ interface Props {
 function SplitHydroMatrix({ types, direction, sizes, form: Form }: Props) {
   return (
     <>
-      {Form && <Form />}
+      {Form && (
+        <Box sx={{ width: 1, py: 1 }}>
+          <Form />
+        </Box>
+      )}
       <SplitView direction={direction} sizes={sizes}>
         <HydroMatrix type={types[0]} />
         <HydroMatrix type={types[1]} />