From 651807438a255f51e0bf23080074346c34c3812a Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Fri, 26 Jul 2019 16:26:11 -0400
Subject: [PATCH] better validation positioning on birthdate step

---
 src/components/formik-forms/formik-select.jsx |  2 +-
 src/components/forms/validation-message.scss  |  1 +
 src/components/join-flow/birthdate-step.jsx   |  4 ++--
 src/components/join-flow/join-flow-steps.scss | 17 +++++++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/formik-forms/formik-select.jsx b/src/components/formik-forms/formik-select.jsx
index 5ec1bcdf5..defff80ef 100644
--- a/src/components/formik-forms/formik-select.jsx
+++ b/src/components/formik-forms/formik-select.jsx
@@ -24,7 +24,7 @@ const FormikSelect = ({
         </option>
     ));
     return (
-        <div className="select">
+        <div className="select row-with-tooltip">
             <Field
                 className={classNames(
                     className
diff --git a/src/components/forms/validation-message.scss b/src/components/forms/validation-message.scss
index f5730744a..d10e30e27 100644
--- a/src/components/forms/validation-message.scss
+++ b/src/components/forms/validation-message.scss
@@ -17,6 +17,7 @@
     min-height: 1rem;
     overflow: visible;
     color: $type-white;
+    z-index: 1;
 
     &:before {
         display: block;
diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx
index 7b0c421c3..16ed442f6 100644
--- a/src/components/join-flow/birthdate-step.jsx
+++ b/src/components/join-flow/birthdate-step.jsx
@@ -110,7 +110,7 @@ class BirthDateStep extends React.Component {
                                     name="birth_month"
                                     options={birthMonthOptions}
                                     validate={this.validateSelect}
-                                    validationClassName="validation-full-width-input"
+                                    validationClassName="validation-birthdate-input"
                                 />
                                 <FormikSelect
                                     className={classNames(
@@ -122,7 +122,7 @@ class BirthDateStep extends React.Component {
                                     name="birth_year"
                                     options={birthYearOptions}
                                     validate={this.validateSelect}
-                                    validationClassName="validation-full-width-input"
+                                    validationClassName="validation-birthdate-input"
                                 />
                             </div>
                         </JoinFlowStep>
diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index 95d6e9089..64bfa562d 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -22,6 +22,23 @@
     transform: translate(21.5625rem, 0);
 }
 
+.validation-birthdate-input {
+    transform: translate(8.75rem, .25rem);
+    width: 7.25rem;
+}
+
+@media #{$intermediate-and-smaller} {
+    .validation-full-width-input {
+        transform: unset;
+        margin-bottom: .75rem;
+    }
+
+    .validation-birthdate-input {
+        transform: unset;
+        width: 8rem;
+    }
+}
+
 .select .join-flow-select {
     width: 9.125rem;
 }