From 90162b9bf36ec24a88b694c4b390c4c11ca478f8 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Thu, 24 Oct 2024 12:41:08 +0200
Subject: [PATCH] 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.

Ticket: https://phabricator.wikimedia.org/T378075
---
 .../shared/form_fields/AmountField.vue        |  6 +--
 .../shared/form_fields/RadioField.vue         | 39 ++++++++++---------
 src/scss/settings/_forms.scss                 |  2 +-
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/shared/form_fields/AmountField.vue b/src/components/shared/form_fields/AmountField.vue
index 8712e7818..845328ad8 100644
--- a/src/components/shared/form_fields/AmountField.vue
+++ b/src/components/shared/form_fields/AmountField.vue
@@ -156,14 +156,14 @@ 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 {
-	max-width: $max-width;
+	max-width: map.get( forms.$input, 'max-width' );
 
 	.input {
-		max-width: $max-width;
+		max-width: map.get( forms.$input, 'max-width' );
 	}
 
 	&-radio-container {
diff --git a/src/components/shared/form_fields/RadioField.vue b/src/components/shared/form_fields/RadioField.vue
index 45d690abf..0f85cc603 100644
--- a/src/components/shared/form_fields/RadioField.vue
+++ b/src/components/shared/form_fields/RadioField.vue
@@ -94,54 +94,62 @@ 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 {
@@ -149,11 +157,6 @@ const onFieldChange = ( newValue: string | number | boolean | null ): void => {
 
 				.radio-form-input {
 					width: 50%;
-					padding-right: 16px;
-				}
-
-				label {
-					padding-left: map.get(units.$spacing, 'x-large');
 				}
 			}
 		}
diff --git a/src/scss/settings/_forms.scss b/src/scss/settings/_forms.scss
index 76af8a5da..04565d6cc 100644
--- a/src/scss/settings/_forms.scss
+++ b/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");