Forms: Fix redirect field styles (#41030)

Automattic · Jan 14, 2025 · 9dd6362 · 9dd6362
1 parent 1f47685
commit 9dd6362
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/projects/packages/forms/changelog/fix-contact-form-redirect-address-styles b/projects/packages/forms/changelog/fix-contact-form-redirect-address-styles
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: Fix redirect field styles
diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js
@@ -15,7 +15,6 @@ import {
 } from '@wordpress/block-editor';
 import { createBlock, registerBlockVariation } from '@wordpress/blocks';
 import {
-	BaseControl,
 	Button,
 	Modal,
 	PanelBody,
@@ -198,18 +197,14 @@ export const JetpackContactFormEdit = forwardRef(
 					) }
 
 					{ 'redirect' === customThankyou && (
-						<BaseControl
-							label={ __( 'Redirect Address', 'jetpack-forms' ) }
-							id={ `contact-form-${ instanceId }-thankyou-url` }
-							__nextHasNoMarginBottom={ true }
-						>
+						<div>
 							<URLInput
-								id={ `contact-form-${ instanceId }-thankyou-url` }
+								label={ __( 'Redirect Address', 'jetpack-forms' ) }
 								value={ customThankyouRedirect }
 								className="jetpack-contact-form__thankyou-redirect-url"
 								onChange={ newURL => setAttributes( { customThankyouRedirect: newURL } ) }
 							/>
-						</BaseControl>
+						</div>
 					) }
 				</>
 			);

diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -240,12 +240,16 @@
 	width: 100%;
 }
 
+.jetpack-contact-form__thankyou-redirect-url {
+	min-width: auto;
+}
+
 .jetpack-contact-form__thankyou-redirect-url input[type='text'] {
 	width: 100%;
 }
 
 .jetpack-contact-form__thankyou-redirect-url__suggestions {
-	width: 260px;
+	width: 230px;
 }
 
 .jetpack-contact-form__integration-panel {