From 911ecc85162764f825d6995784c346a77284396d Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Fri, 12 Jul 2019 11:39:04 -0400
Subject: [PATCH 1/3] Format validation; redo of PR 3116

---
 src/components/formik-forms/formik-input.jsx | 11 ++++++++---
 src/components/forms/row.scss                |  5 +++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/formik-forms/formik-input.jsx b/src/components/formik-forms/formik-input.jsx
index ab62130a0..b128d6b6b 100644
--- a/src/components/formik-forms/formik-input.jsx
+++ b/src/components/formik-forms/formik-input.jsx
@@ -11,9 +11,10 @@ require('../forms/row.scss');
 const FormikInput = ({
     className,
     error,
+    validationClassName,
     ...props
 }) => (
-    <div className="col-sm-9 row">
+    <div className="col-sm-9 row row-relative">
         <Field
             className={classNames(
                 'input',
@@ -22,7 +23,10 @@ const FormikInput = ({
             {...props}
         />
         {error && (
-            <ValidationMessage message={error} />
+            <ValidationMessage
+                className={validationClassName}
+                message={error}
+            />
         )}
     </div>
 );
@@ -31,7 +35,8 @@ const FormikInput = ({
 FormikInput.propTypes = {
     className: PropTypes.string,
     error: PropTypes.string,
-    type: PropTypes.string
+    type: PropTypes.string,
+    validationClassName: PropTypes.string
 };
 
 module.exports = FormikInput;
diff --git a/src/components/forms/row.scss b/src/components/forms/row.scss
index 17a8e3fa8..56f72fcc2 100644
--- a/src/components/forms/row.scss
+++ b/src/components/forms/row.scss
@@ -21,6 +21,11 @@
     }
 }
 
+/* allow elements such as validation errors to position relative to this row */
+.row-relative {
+    position: relative;
+}
+
 .row-label {
     margin-bottom: .75rem;
     line-height: 1.7rem;

From faa37ae270bdd971930ed99760aac2caf4205a8d Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 15 Jul 2019 17:26:02 -0400
Subject: [PATCH 2/3] rename row-relative to row-with-tooltip

---
 src/components/formik-forms/formik-input.jsx | 2 +-
 src/components/forms/row.scss                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/formik-forms/formik-input.jsx b/src/components/formik-forms/formik-input.jsx
index b128d6b6b..0788d0b9c 100644
--- a/src/components/formik-forms/formik-input.jsx
+++ b/src/components/formik-forms/formik-input.jsx
@@ -14,7 +14,7 @@ const FormikInput = ({
     validationClassName,
     ...props
 }) => (
-    <div className="col-sm-9 row row-relative">
+    <div className="col-sm-9 row row-with-tooltip">
         <Field
             className={classNames(
                 'input',
diff --git a/src/components/forms/row.scss b/src/components/forms/row.scss
index 56f72fcc2..19dc2c351 100644
--- a/src/components/forms/row.scss
+++ b/src/components/forms/row.scss
@@ -22,7 +22,7 @@
 }
 
 /* allow elements such as validation errors to position relative to this row */
-.row-relative {
+.row-with-tooltip {
     position: relative;
 }
 

From c8800d8663df2f8d33fad5d7345b9b35fbca98f5 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 17 Jul 2019 12:58:50 -0400
Subject: [PATCH 3/3] After rebasing on develop, reintroduce changes

---
 src/components/join-flow/join-flow-steps.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx
index 1a03396dd..c612853cd 100644
--- a/src/components/join-flow/join-flow-steps.jsx
+++ b/src/components/join-flow/join-flow-steps.jsx
@@ -10,6 +10,8 @@ const validate = require('../../lib/validate');
 const FormikInput = require('../../components/formik-forms/formik-input.jsx');
 const JoinFlowStep = require('./join-flow-step.jsx');
 
+require('./join-flow-steps.scss');
+
 /*
  * Username step
  */
@@ -127,6 +129,7 @@ class UsernameStep extends React.Component {
                                     id="username"
                                     name="username"
                                     validate={this.validateUsernameIfPresent}
+                                    validationClassName="validation-full-width-input"
                                     onBlur={() => validateField('username')} // eslint-disable-line react/jsx-no-bind
                                 />
                                 <div className="join-flow-password-section">