From cc0496619dca01cb72f066144c7be8880106d800 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 5 Dec 2016 12:53:04 -0500
Subject: [PATCH 1/2] use width for radio buttons, not margin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This fixes #962 – the margin was causing flex to overflow the radio buttons when the text was long, causing the male and other options to render on top of each other. This fixes that by giving the radio buttons a fixed with relative to the parent container, and by ensuring that languages with long localizations will still be visible in overflow text.
---
 src/components/registration/steps.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index d9ef9e135..4adadfb12 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -66,8 +66,9 @@
         }
 
         .radio {
-            margin-right: 2.5rem;
+            width: 50%;
             line-height: 3rem;
+            white-space: nowrap;
 
             input {
                 margin-right: 1rem;

From afa25dc1c23aba3c87b0989f61e0cc7f4e80a599 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 5 Dec 2016 14:05:27 -0500
Subject: [PATCH 2/2] Move other input to be the label for the button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

thanks @rschamp! Never would’ve thought label would accept html.
---
 src/components/registration/steps.jsx  | 32 +++++++++++++-------------
 src/components/registration/steps.scss | 17 +++++++-------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx
index a9182ce6e..b219097ec 100644
--- a/src/components/registration/steps.jsx
+++ b/src/components/registration/steps.jsx
@@ -360,24 +360,24 @@ module.exports = {
                                         options={[
                                             {value: 'female', label: formatMessage({id: 'general.female'})},
                                             {value: 'male', label: formatMessage({id: 'general.male'})},
-                                            {value: 'other', label: ''}
+                                            {value: 'other', label: <Input
+                                                className="demographics-step-input-other"
+                                                name="user.genderOther"
+                                                type="text"
+                                                validations={{
+                                                    maxLength: 25
+                                                }}
+                                                validationErrors={{
+                                                    maxLength: formatMessage({
+                                                        id: 'registration.validationMaxLength'
+                                                    })
+                                                }}
+                                                disabled={this.state.otherDisabled}
+                                                required={!this.state.otherDisabled}
+                                                help={null}
+                                            />}
                                         ]}
                                         required />
-                            <div className="gender-input">
-                                <Input name="user.genderOther"
-                                       type="text"
-                                       validations={{
-                                           maxLength: 25
-                                       }}
-                                       validationErrors={{
-                                           maxLength: formatMessage({
-                                               id: 'registration.validationMaxLength'
-                                           })
-                                       }}
-                                       disabled={this.state.otherDisabled}
-                                       required={!this.state.otherDisabled}
-                                       help={null} />
-                            </div>
                             <Select label={formatMessage({id: 'general.country'})}
                                     name="user.country"
                                     options={getCountryOptions(this.props.intl, DEFAULT_COUNTRY)}
diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index 4adadfb12..0be5e2f92 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -13,7 +13,6 @@
         border-radius: 8px;
     }
 
-    .gender-input,
     .other-input {
         float: right;
         width: 90%;
@@ -61,19 +60,21 @@
     }
 
     &.demographics-step {
-        .gender-input {
-            margin-top: -5.5rem;
-        }
-
         .radio {
-            width: 50%;
-            line-height: 3rem;
-            white-space: nowrap;
+            margin: 1.5rem 1.5rem 0 0;
 
             input {
                 margin-right: 1rem;
             }
         }
+
+        .demographics-step-input-other {
+            display: inline-block;
+
+            .col-sm-9 {
+                display: inline-block;
+            }
+        }
     }
 
     &.phone-step {