fix: ensured we use justify between for form body

saithsab877 · Oct 8, 2024 · 9789907 · 9789907
1 parent 8e565ee
commit 9789907
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/components/SettingsModal/SettingsView/General/index.tsx b/src/components/SettingsModal/SettingsView/General/index.tsx
@@ -58,7 +58,7 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
   return (
     <FormProvider {...form}>
       <StyledForm id="add-node-form" onSubmit={handleSubmit}>
-        <>
+        <FormBody>
           <Flex>
             {swarmUiUrl && (
               <SwarmLinkContainer>
@@ -89,7 +89,7 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
             </Flex>
           </Flex>
 
-          <Flex mt={190} py={error ? 0 : 24}>
+          <Flex py={error ? 0 : 24}>
             <Button
               color="secondary"
               disabled={isSubmitting}
@@ -116,14 +116,15 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
               </StyledError>
             ) : null}
           </Flex>
-        </>
+        </FormBody>
       </StyledForm>
     </FormProvider>
   )
 }
 
 const StyledForm = styled.form`
   padding: 36px;
+  height: 100%;
 `
 
 const IconWrapper = styled.span`
@@ -143,6 +144,13 @@ const SwarmLinkContainer = styled(Flex)`
   align-items: flex-end;
 `
 
+const FormBody = styled(Flex)`
+  display: flex;
+  direction: column;
+  justify-content: space-between;
+  height: 100%;
+`
+
 const Link = styled.a`
   font-family: 'Barlow';
   font-size: 16px;