From e901deb3981aeeb313155fa9b1c5224bba762a44 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 23 Sep 2019 16:18:20 -0400
Subject: [PATCH] =?UTF-8?q?make=20validations=20be=20the=20same=20width=20?=
 =?UTF-8?q?as=20inputs=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…when window is narrow
---
 src/components/join-flow/birthdate-step.jsx   |  6 +++++-
 src/components/join-flow/country-step.jsx     |  5 ++++-
 src/components/join-flow/join-flow-steps.scss | 18 ++++++++++++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx
index 6849bc126..7e507468b 100644
--- a/src/components/join-flow/birthdate-step.jsx
+++ b/src/components/join-flow/birthdate-step.jsx
@@ -117,6 +117,7 @@ class BirthDateStep extends React.Component {
                                     options={birthMonthOptions}
                                     validate={this.validateSelect}
                                     validationClassName={classNames(
+                                        'validation-birthdate',
                                         'validation-birthdate-month',
                                         'validation-left'
                                     )}
@@ -135,7 +136,10 @@ class BirthDateStep extends React.Component {
                                     name="birth_year"
                                     options={birthYearOptions}
                                     validate={this.validateSelect}
-                                    validationClassName="validation-birthdate-year"
+                                    validationClassName={classNames(
+                                        'validation-birthdate',
+                                        'validation-birthdate-year'
+                                    )}
                                     /* eslint-disable react/jsx-no-bind */
                                     onFocus={() => setFieldError('birth_year', null)}
                                     /* eslint-enable react/jsx-no-bind */
diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx
index 1e6ebd252..92ca4559c 100644
--- a/src/components/join-flow/country-step.jsx
+++ b/src/components/join-flow/country-step.jsx
@@ -93,7 +93,10 @@ class CountryStep extends React.Component {
                                     name="country"
                                     options={this.countryOptions}
                                     validate={this.validateSelect}
-                                    validationClassName="validation-full-width-input"
+                                    validationClassName={classNames(
+                                        'validation-full-width-input',
+                                        'validation-country'
+                                    )}
                                     /* eslint-disable react/jsx-no-bind */
                                     onFocus={() => setFieldError('country', null)}
                                     /* eslint-enable react/jsx-no-bind */
diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index 7488fd2b2..ebfcb73f2 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -56,11 +56,25 @@
     .validation-full-width-input {
         transform: unset;
         margin-bottom: .75rem;
+        max-width: 100%;
     }
 
-    .validation-birthdate-input {
+    .validation-country {
+        top: .5rem;
+    }
+
+    .validation-birthdate {
         transform: unset;
-        width: 8rem;
+        top: .5rem;
+        width: 19rem;
+    }
+
+    .validation-birthdate-month {
+        margin-right: -9.25rem;
+    }
+
+    .validation-birthdate-year {
+        margin-left: -9.625rem;
     }
 }