From 5b603669854117e7599922cabf23590e8c7ab95f Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 3 Oct 2019 17:50:25 -0400
Subject: [PATCH 1/3] change how we handle the width of gender custom input

---
 src/components/formik-forms/formik-radio-button.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/formik-forms/formik-radio-button.scss b/src/components/formik-forms/formik-radio-button.scss
index c178cf630..14db86c68 100644
--- a/src/components/formik-forms/formik-radio-button.scss
+++ b/src/components/formik-forms/formik-radio-button.scss
@@ -39,7 +39,7 @@ input[type="radio"].formik-radio-button {
 
 input.formik-radio-input, .formik-radio-input input {
     height: 2.1875rem;
-    width: 10.25rem;
+    width: 100%;
     margin-bottom: 0;
     border-radius: .5rem;
     background-color: $ui-white;
@@ -52,6 +52,7 @@ input.formik-radio-input, .formik-radio-input input {
 .formik-radio-input-wrapper {
     margin-left: auto;
     margin-right: .25rem;
+    width: 10.25rem;
 }
 
 .formik-radio-label-other {

From abc85fe3be7da6792fb13f565a424923eeec5ab3 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 3 Oct 2019 17:51:17 -0400
Subject: [PATCH 2/3] change calculation for join flow modal inner content
 width, to be more friedly at small sizes

---
 src/components/join-flow/join-flow-step.scss  | 2 +-
 src/components/join-flow/join-flow-steps.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index dee487434..c5ac3cf4e 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/src/components/join-flow/join-flow-step.scss
@@ -12,7 +12,7 @@
 
 .join-flow-inner-content {
     box-shadow: none;
-    width: calc(100% - 5.875rem);
+    width: calc(50% + 7.84375rem);
     /* must use padding for top, rather than margin, because margins will collapse */
     margin: 0 auto;
     padding: 2.3125rem 0 2.5rem;
diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index e9c93b4a9..ef7d32716 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -185,7 +185,7 @@
 
 .gender-radio-row {
     transition: all .125s ease;
-    width: 20.875rem;
+    width: 97%;
     min-height: 2.85rem;
     background-color: $ui-gray;
     border-radius: .5rem;

From e45397d25008eb29b81f4d556f53bc4768b365ce Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 3 Oct 2019 17:52:23 -0400
Subject: [PATCH 3/3] custom birth month and year width for small window sizes

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

diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index ef7d32716..bf74d5baa 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -89,10 +89,18 @@
 .select .join-flow-select-month {
     margin-right: .5rem;
     width: 9.125rem;
+
+    @media #{$small} {
+        width: 8.25rem;
+    }
 }
 
 .select .join-flow-select-year {
     width: 9.125rem;
+
+    @media #{$small} {
+        width: 8.25rem;
+    }
 }
 
 .select .join-flow-select-country {