From 22200bd0564ef1994ed6d15557c39ce41df5ddc5 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Mon, 1 Aug 2022 18:20:57 +0530
Subject: [PATCH] feat(frontend): added scroll view to network modals

---
 .../src/components/Modal/network/CreateNetworkModal.tsx   | 5 +++--
 .../src/components/Modal/network/EditNetworkModal.tsx     | 8 ++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx b/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
index 8ccc155..01a7a74 100644
--- a/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
+++ b/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
@@ -7,6 +7,7 @@ import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
 import { Button, styled } from "@mui/joy";
 import { reportErrorsAndSubmit } from "../../../utils/forms";
+import { ScrollView } from "../../ScrollView";
 
 interface ICreateNetworkModalProps {
   onCreateNetwork: CallbackFunction;
@@ -64,10 +65,10 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
             </nav>
           </div>
 
-          <div className="relative px-4 py-3 flex-auto">
+          <ScrollView height="500px" className="relative px-4 py-3 flex-auto">
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPAM />}
-          </div>
+          </ScrollView>
 
           <Actions>
             <Button
diff --git a/services/frontend/src/components/Modal/network/EditNetworkModal.tsx b/services/frontend/src/components/Modal/network/EditNetworkModal.tsx
index 2a32490..d96b86c 100644
--- a/services/frontend/src/components/Modal/network/EditNetworkModal.tsx
+++ b/services/frontend/src/components/Modal/network/EditNetworkModal.tsx
@@ -7,6 +7,7 @@ import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
 import { Button, styled } from "@mui/joy";
 import { reportErrorsAndSubmit } from "../../../utils/forms";
+import { ScrollView } from "../../ScrollView";
 
 interface IEditNetworkModalProps {
   onUpdateNetwork: CallbackFunction;
@@ -63,10 +64,13 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => {
             </nav>
           </div>
 
-          <div className="relative px-4 py-3 flex-auto max-h-96 overflow-y-auto">
+          <ScrollView
+            height="500px"
+            className="relative px-4 py-3 flex-auto max-h-96 overflow-y-auto"
+          >
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPAM />}
-          </div>
+          </ScrollView>
 
           <Actions>
             <Button