Merge pull request #2739 from chrisgarrity/issue/2309-wide-translations

Wrap ‘need help?’ link when translation is too long

src/components/login/login.jsx

@@ -7,6 +7,7 @@ const Form = require('../forms/form.jsx');
 const Input = require('../forms/input.jsx');
 const Button = require('../forms/button.jsx');
 const Spinner = require('../spinner/spinner.jsx');
+const FlexRow = require('../flex-row/flex-row.jsx');
 
 require('./login.scss');
 
@@ -59,6 +60,7 @@ class Login extends React.Component {
                         name="password"
                         type="password"
                     />
+                    <FlexRow className="submit-row">
                         {this.state.waiting ? [
                             <Button
                                 className="submit-button white"
@@ -81,12 +83,12 @@ class Login extends React.Component {
                             </Button>
                         ]}
                         <a
-                        className="right"
                             href="/accounts/password_reset/"
                             key="passwordResetLink"
                         >
                             <FormattedMessage id="login.needHelp" />
                         </a>
+                    </FlexRow>
                     {error}
                 </Form>
             </div>

src/components/login/login.scss

@@ -28,22 +28,23 @@
         font-weight: bold;
     }
 
-    .right {
-        float: right;
-    }
-
     .spinner {
         margin: 0 .8rem;
         width: 1rem;
         vertical-align: middle;
     }
     
+    .submit-row {
+        justify-content: space-between;
+        flex-direction: row; // override 'column' layout at small widths
+    }
+
     .submit-button {
         margin-top: 5px;
     }
 
     a {
-        margin-top: 15px;
+        margin: auto 0;
         color: $ui-white;
 
         &:link,