Improve alignment on donation form fields

We had different widths for each of the different
fields which was making the form look ragged. This
increases the max-width to line them all up.

Also adds flex wrap to the row alignment radio fields
so they don't burst out of the content box.

src/components/shared/form_fields/AmountField.vue

@@ -156,7 +156,7 @@ watch( () => props.modelValue, ( newValue: string ) => {
 @use '@src/scss/settings/breakpoints';
 @use 'sass:map';
 
-$max-width: 384px;
+$max-width: 414px;
 $input-height: 50px;
 
 .form-field-amount {

src/components/shared/form_fields/RadioField.vue

@@ -94,66 +94,69 @@ const onFieldChange = ( newValue: string | number | boolean | null ): void => {
 		}
 
 		label {
-			padding-left: map.get( units.$spacing, 'small' ) * 3;
+			padding-left: map.get( units.$spacing, 'x-large' );
 		}
 
 	}
 
 	&.row-alignment {
-		@include breakpoints.tablet-up {
-			max-width: none;
-		}
-
 		.form-field-radio-container {
 			flex-direction: column;
+			margin: 0 ( -( map.get( units.$spacing, 'xx-small' ) ) );
 
 			.radio-form-input {
-				margin: 0 0 map.get(units.$spacing, 'small');
+				padding: 0 map.get(units.$spacing, 'xx-small');
+				margin-bottom: map.get(units.$spacing, 'small');
 
 				&:last-child {
 					margin-bottom: 0;
 				}
+
+				input {
+					left: map.get( units.$spacing, 'medium' );
+				}
 			}
 
 			@include breakpoints.tablet-up {
 				flex-direction: row;
+				flex-wrap: wrap;
 
 				.radio-form-input {
-					margin: 0 map.get(units.$spacing, 'large') 0 0;
-				}
-
-				label {
-					padding-left: map.get(units.$spacing, 'x-large');
+					&:last-child {
+						margin-bottom: map.get(units.$spacing, 'small');
+					}
 				}
 			}
 		}
 	}
 
 	&.twocolumnsperrow-alignment {
-		max-width: 430px;
+		max-width: map.get( forms.$input, 'max-width' );
+
 		.form-field-radio-container {
 			flex-direction: column;
 			flex-wrap: wrap;
+			margin: 0 ( -( map.get( units.$spacing, 'xx-small' ) ) );
 
 			.radio-form-input {
 				width: 100%;
-				margin: 0 0 16px 0;
+				padding: 0 map.get(units.$spacing, 'xx-small') 0;
+				margin-bottom: map.get(units.$spacing, 'small');
 
 				&:last-child {
 					margin-bottom: 0;
 				}
+
+				input {
+					left: map.get( units.$spacing, 'medium' );
+				}
 			}
 
 			@include breakpoints.tablet-up {
 				flex-direction: row;
 
 				.radio-form-input {
 					width: 50%;
-					padding-right: 16px;
-				}
-
-				label {
-					padding-left: map.get(units.$spacing, 'x-large');
 				}
 			}
 		}

src/scss/settings/_forms.scss

@@ -11,7 +11,7 @@ $input: (
 	'height': 46px,
 	'font-size': 16px,
 	'min-width': 272px,
-	'max-width': 384px,
+	'max-width': 414px,
 );
 
 $checkbox-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");