improved AliasesPreferencesForm.tsx's button position

src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx

@@ -121,7 +121,13 @@ export default function AliasesPreferencesForm(): ReactElement {
 
 	return (
 		<>
-			<Grid container spacing={4}>
+			<form onSubmit={formik.handleSubmit}>
+				<Grid
+					container
+					spacing={4}
+					flexDirection="column"
+					alignItems="center"
+				>
 					<Grid item>
 						<Typography variant="h6" component="h3">
 							Aliases Preferences
@@ -129,13 +135,12 @@ export default function AliasesPreferencesForm(): ReactElement {
 					</Grid>
 					<Grid item>
 						<Typography variant="body1" component="p">
-						Select the default behavior for your aliases. This will
-						only affect aliases that do not have a custom behavior
-						set.
+							Select the default behavior for your aliases. This
+							will only affect aliases that do not have a custom
+							behavior set.
 						</Typography>
 					</Grid>
 					<Grid item>
-					<form onSubmit={formik.handleSubmit}>
 						<Grid
 							display="flex"
 							flexDirection="row"
@@ -383,6 +388,8 @@ export default function AliasesPreferencesForm(): ReactElement {
 									</Grid>
 								</Collapse>
 							</Grid>
+						</Grid>
+					</Grid>
 					<Grid item>
 						<LoadingButton
 							loading={formik.isSubmitting}
@@ -395,8 +402,6 @@ export default function AliasesPreferencesForm(): ReactElement {
 					</Grid>
 				</Grid>
 			</form>
-				</Grid>
-			</Grid>
 			<ErrorSnack message={formik.errors.detail} />
 			<SuccessSnack message={data?.detail} />
 		</>