chore(meshconfig): fix form layout

libremesh · Oct 29, 2024 · 3ddf980 · 3ddf980
1 parent bb7e94d
commit 3ddf980
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/MeshStatus.tsx
@@ -7,6 +7,7 @@ export const MeshStatus = () => {
     const { showToast } = useToast();
     return (
         <FooterStatus
+            fixed={false}
             status={"success"}
             btn={"Update"}
             onClick={() => {

diff --git a/plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/containers/LimeConfigEditForm.tsx
@@ -45,25 +45,26 @@ const EditConfigForm = ({
     };
 
     return (
-        <div className={"flex flex-col h-full w-full max-h-full"}>
-            <FormProvider {...fMethods}>
-                <form onSubmit={fMethods.handleSubmit(onSubmit)}>
-                    <div className={"flex flex-col gap-3"}>
-                        {Object.entries(formData).map(
-                            ([title, dropdown], index) => (
-                                <FormSection
-                                    key={index}
-                                    title={title}
-                                    dropdown={dropdown}
-                                />
-                            )
-                        )}
-                        <AddNewConfigSection />
-                    </div>
-                    <MeshStatus />
-                </form>
-            </FormProvider>
-        </div>
+        <FormProvider {...fMethods}>
+            <form
+                className="flex flex-col w-full h-full max-h-full grow justify-between mb-0"
+                onSubmit={fMethods.handleSubmit(onSubmit)}
+            >
+                <div className="flex flex-col grow overflow-y-auto max-h-full gap-3 px-2 mb-4">
+                    {Object.entries(formData).map(
+                        ([title, dropdown], index) => (
+                            <FormSection
+                                key={index}
+                                title={title}
+                                dropdown={dropdown}
+                            />
+                        )
+                    )}
+                    <AddNewConfigSection />
+                </div>
+                <MeshStatus />
+            </form>
+        </FormProvider>
     );
 };
 

diff --git a/src/components/Modal/FullScreenModal.tsx b/src/components/Modal/FullScreenModal.tsx
@@ -20,8 +20,8 @@ export const FullScreenModal = ({
     onClose,
 }: IFullScreenModalProps) => {
     return (
-        <div className="flex flex-col min-h-screen w-full">
-            <div className="fixed top-0 left-0 right-0 bg-white z-50 py-7 px-4 flex items-center font-medium">
+        <div className="fixed top-0 left-0 right-0 flex flex-col min-h-screen max-h-full w-full overflow-auto">
+            <div className="bg-white z-50 py-7 px-4 flex items-center font-medium">
                 <div
                     className={`flex items-center justify-items-start cursor-pointer w-10 h-10 text-black text-3xl`}
                     onClick={onClose}
@@ -35,7 +35,11 @@ export const FullScreenModal = ({
                     <Loading />
                 </div>
             ) : (
-                <div className={"pt-2 bg-white w-full h-full px-4"}>
+                <div
+                    className={
+                        "flex flex-col pt-2 bg-white w-full min-h-full h-screen px-4"
+                    }
+                >
                     {children}
                 </div>
             )}