feat(frontend): fixed height for create service modal

services/frontend/src/components/Modal/service/Create.tsx

@@ -11,6 +11,7 @@ import {
   getInitialValues,
   validationSchema
 } from "./form-utils";
+import { styled } from "@mui/joy";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -44,6 +45,38 @@ const tabs = [
   }
 ];
 
+const FormContainer = styled("div")`
+  width: 640px;
+  height: 800px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const TabBody = styled("div")`
+  overflow: auto;
+  height: 700px;
+
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+`;
+
 const ModalServiceCreate = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
@@ -87,7 +120,8 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
               validationSchema={validationSchema}
             >
               {(formik) => (
-                <>
+                <FormContainer>
+                  <div>
                     <div className="border-b border-gray-200 px-4 md:px-8">
                       <nav
                         className="-mb-px flex space-x-4 md:space-x-8"
@@ -116,11 +150,12 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                       </nav>
                     </div>
 
-                  <div className="relative px-4 py-3 flex-auto">
+                    <TabBody className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
                       {openTab === "Environment" && <Environment />}
                       {openTab === "Volumes" && <Volumes />}
                       {openTab === "Labels" && <Labels />}
+                    </TabBody>
                   </div>
 
                   <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
@@ -132,7 +167,7 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                       Add
                     </button>
                   </div>
-                </>
+                </FormContainer>
               )}
             </Formik>
           </div>