Fix Support Phone number input styling to match that of WooPayments (#11022)

Author: elazzabi

changelog/fix-fix-phone-input-styling

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix margins for phone number input and add styling to match other inputs

client/settings/phone-input/index.tsx

@@ -13,6 +13,7 @@ import utils from 'iti/utils';
 
 interface PhoneNumberInputProps {
 	value: string;
+	id: string;
 	onValidationChange: ( isValid: boolean ) => void;
 	onValueChange: ( value: string ) => void;
 	onCountryDropdownClick?: () => void;
@@ -27,6 +28,7 @@ interface PhoneNumberInputProps {
 const PhoneNumberInput = ( {
 	onValueChange,
 	value,
+	id,
 	onValidationChange = ( validation ) => validation,
 	onCountryDropdownClick,
 	inputProps = {
@@ -207,6 +209,7 @@ const PhoneNumberInput = ( {
 			<input
 				type="tel"
 				ref={ inputRef }
+				id={ id }
 				value={ removeInternationalPrefix( value ) }
 				onBlur={ () => {
 					setFocusLost( true );

client/settings/phone-input/style.scss

@@ -144,7 +144,6 @@
 // override intl-tel-input styles
 .iti {
 	width: 100%;
-	margin-top: $gap-large;
 
 	&--container {
 		margin-top: 0;

client/settings/support-phone-input/styles.scss

@@ -14,3 +14,10 @@
 		border-radius: 0;
 	}
 }
+
+#account-business-support-phone-input {
+	height: 40px;
+	padding-right: 12px;
+	width: 100%;
+	border-radius: 0;
+}