Use flexbox in wizard

Author: wwahammy

app/assets/stylesheets/common/layouts.css.scss

@@ -101,9 +101,9 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/
 .fieldsLayout--three {
 	@include fieldsLayout;
 	& > .field { width: 33.333%; }
-	& > .field:nth-of-type(3n -2) { padding: 0 10px 0 0; }
-	& > .field:nth-of-type(3n -1) { padding: 0 5px; }
-	& > .field:nth-of-type(3n) { padding:0 0 0 10px; }
+	// & > .field:nth-of-type(3n -2) { padding: 0 10px 0 0; }
+	// & > .field:nth-of-type(3n -1) { padding: 0 5px; }
+	// & > .field:nth-of-type(3n) { padding:0 0 0 10px; }
 }
 
 .fieldsLayout--four {
@@ -127,14 +127,14 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/
 }
 
 @mixin fieldsetLayout {
-	clear: both;
-	overflow: auto;
-	fieldset {
-		display: inline-block;
-		float: left;
-		margin-left: 0;
-		margin-right: 0;
-	}
+	// clear: both;
+	// overflow: auto;
+	// fieldset {
+	// 	display: inline-block;
+	// 	float: left;
+	// 	margin-left: 0;
+	// 	margin-right: 0;
+	// }
 }
 
 
@@ -167,9 +167,15 @@ Full license explanation at https://github.com/houdiniproject/houdini/blob/main/
 
 .fieldsetLayout--three--evenPadding {
 	@include fieldsetLayout;
-	fieldset {
-		width: 33.33% !important;
-		padding: 0 5px;
+	display: flex;
+	align-content: stretch;
+	row-gap: 10px;
+	column-gap: 10px;
+	flex-wrap: wrap;
+	justify-items: stretch;
+
+	> * {
+		flex: 1 1 25%;
 	}
 }
 

app/javascript/legacy/nonprofits/donate/amount-step.js

@@ -142,9 +142,9 @@ function composeTranslation(full, bold) {
 // All the buttons and the custom input for the amounts to select
 function amountFields(state) {
   if(state.params$().single_amount) return ''
-  return h('div.u-inline.fieldsetLayout--three--evenPadding', [
-    h('span',
-      R.map(
+  return h('div.fieldsetLayout--three--evenPadding', [
+    
+      ...R.map(
         amt => h('fieldset', [
           h('button.button.u-width--full.white.amount', {
             class: {'is-selected': state.buttonAmountSelected$() && state.donation$().amount === amt*100}
@@ -159,7 +159,7 @@ function amountFields(state) {
           ])
         ])
     , state.params$().custom_amounts || [] )
-    )
+    
   , h('fieldset.' + prependCurrencyClassname(), [
       h('input.amount.other', {
         props: {name: 'amount', step: 'any', type: 'number', min: 1, placeholder: I18n.t('nonprofits.donate.amount.custom')}

app/javascript/legacy/recurring_donations/edit/amount-step.js

@@ -69,9 +69,9 @@ function chooseNewDonationAmount() {
 // All the buttons and the custom input for the amounts to select
 function amountFields(state) {
     if(state.params$().single_amount) return ''
-    return h('div.u-inline.fieldsetLayout--three--evenPadding', [
-        h('span',
-            R.map(
+    return h('div.fieldsetLayout--three--evenPadding', [
+   
+            ...R.map(
                 amt => h('fieldset', [
                     h('button.button.u-width--full.white.amount', {
                         class: {'is-selected': state.buttonAmountSelected$() && state.donation$().amount === amt*100}
@@ -86,7 +86,7 @@ function amountFields(state) {
                     ])
                 ])
                 , state.params$().custom_amounts || [] )
-        )
+        
         , h('fieldset.prepend--dollar', [
             h('input.amount', {
                 props: {name: 'amount', step: 'any', type: 'number', min: 1, placeholder: 'Custom'}

app/views/nonprofits/donate/_amount.html.erb

@@ -36,7 +36,7 @@
 			<small>Select an amount for your <strong>monthly</strong> contribution</small>
 		</p>
 
-		<div class='u-inline fieldsetLayout--three--evenPadding'>
+		<div class='fieldsetLayout--three--evenPadding'>
 			<fieldset>
 				<!--= repeat donate_wiz.amounts -->
 				<button class='button u-width--full white amount'>