Remove unnecessary element from form, fix mobile overflow

Automattic · Sep 20, 2024 · 3f6b080 · 3f6b080
1 parent 342a454
commit 3f6b080
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 36 deletions.
diff --git a/...ow/internals/steps-repository/site-migration-credentials/components/backup-file-field.tsx b/...ow/internals/steps-repository/site-migration-credentials/components/backup-file-field.tsx
@@ -15,33 +15,31 @@ export const BackupFileField: React.FC< CredentialsFormFieldProps > = ( { contro
 
 	return (
 		<div className="site-migration-credentials">
-			<div className="site-migration-credentials__form">
-				<div className="site-migration-credentials__form-field">
-					<FormLabel htmlFor="backup-file">{ translate( 'Backup file location' ) }</FormLabel>
-					<Controller
-						control={ control }
-						name="backupFileLocation"
-						rules={ {
-							required: translate( 'Please enter a valid URL.' ),
-							validate: isBackupFileLocationValid,
-						} }
-						render={ ( { field } ) => (
-							<FormTextInput
-								id="backup-file"
-								type="text"
-								isError={ !! errors?.backupFileLocation }
-								placeholder={ translate( 'Enter your backup file location' ) }
-								{ ...field }
-							/>
-						) }
-					/>
-				</div>
-				<ErrorMessage error={ errors?.backupFileLocation } />
-				<div className="site-migration-credentials__form-note site-migration-credentials__backup-note">
-					{ translate(
-						"Upload your file to a service like Dropbox or Google Drive to get a link. Don't forget to make sure that anyone with the link can access it."
+			<div className="site-migration-credentials__form-field">
+				<FormLabel htmlFor="backup-file">{ translate( 'Backup file location' ) }</FormLabel>
+				<Controller
+					control={ control }
+					name="backupFileLocation"
+					rules={ {
+						required: translate( 'Please enter a valid URL.' ),
+						validate: isBackupFileLocationValid,
+					} }
+					render={ ( { field } ) => (
+						<FormTextInput
+							id="backup-file"
+							type="text"
+							isError={ !! errors?.backupFileLocation }
+							placeholder={ translate( 'Enter your backup file location' ) }
+							{ ...field }
+						/>
 					) }
-				</div>
+				/>
+			</div>
+			<ErrorMessage error={ errors?.backupFileLocation } />
+			<div className="site-migration-credentials__form-note site-migration-credentials__backup-note">
+				{ translate(
+					"Upload your file to a service like Dropbox or Google Drive to get a link. Don't forget to make sure that anyone with the link can access it."
+				) }
 			</div>
 		</div>
 	);

diff --git a/...low/internals/steps-repository/site-migration-credentials/components/credentials-form.tsx b/...low/internals/steps-repository/site-migration-credentials/components/credentials-form.tsx
@@ -34,7 +34,7 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
 	const queryError = useQuery().get( 'error' ) || null;
 
 	return (
-		<form onSubmit={ handleSubmit( submitHandler ) }>
+		<form className="site-migration-credentials__form" onSubmit={ handleSubmit( submitHandler ) }>
 			{ queryError === 'ticket-creation' && (
 				<Banner
 					className="site-migration-credentials__error-banner"
@@ -52,15 +52,13 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
 
 				{ accessMethod === 'credentials' && (
 					<div className="site-migration-credentials">
-						<div className="site-migration-credentials__form">
-							<SiteAddressField
-								control={ control }
-								errors={ errors }
-								importSiteQueryParam={ importSiteQueryParam }
-							/>
-							<UsernameField control={ control } errors={ errors } />
-							<PasswordField control={ control } errors={ errors } />
-						</div>
+						<SiteAddressField
+							control={ control }
+							errors={ errors }
+							importSiteQueryParam={ importSiteQueryParam }
+						/>
+						<UsernameField control={ control } errors={ errors } />
+						<PasswordField control={ control } errors={ errors } />
 					</div>
 				) }
 

diff --git a/...stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss b/...stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss
@@ -7,6 +7,10 @@
 		}
 	}
 
+	&__form {
+		margin-bottom: 60px;
+	}
+
 	.site-migration-credentials__content,
 	.site-migration-credentials__error-banner {
 		margin: 0 auto 16px;