From 2b23a41a45b66006d2958fc99370a70c47e75c26 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 3 Oct 2019 12:35:36 -0400
Subject: [PATCH 1/2] several fixes to join modal responsiveness

---
 src/components/join-flow/join-flow-step.scss  |  8 ++++++-
 .../join-flow/next-step-button.scss           |  6 ++++++
 src/components/modal/join/modal.scss          | 21 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index 5ae543ca9..dee487434 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/src/components/join-flow/join-flow-step.scss
@@ -42,10 +42,16 @@
     margin: 0;
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
+
+    /* match the small window setting for modal as a whole */
+    @media #{$small}, #{$small-height} {
+        border-top-left-radius: 0rem;
+        border-top-right-radius: 0rem;
+    }
 }
 
 .join-flow-header-image {
-    width: 27.5rem;
+    width: 100%;
 }
 
 .join-flow-footer-message {
diff --git a/src/components/join-flow/next-step-button.scss b/src/components/join-flow/next-step-button.scss
index 366972f11..2747dc178 100644
--- a/src/components/join-flow/next-step-button.scss
+++ b/src/components/join-flow/next-step-button.scss
@@ -14,6 +14,12 @@
         transition: background-color .25s ease;
         background-color: $ui-orange-90percent;
     }
+
+    /* match the small window setting for modal as a whole */
+    @media #{$small}, #{$small-height} {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 }
 
 .next-step-title {
diff --git a/src/components/modal/join/modal.scss b/src/components/modal/join/modal.scss
index d6bbf845c..416cc1400 100644
--- a/src/components/modal/join/modal.scss
+++ b/src/components/modal/join/modal.scss
@@ -1,13 +1,32 @@
 @import "../../../colors";
 @import "../../../frameless";
 
+/* unusually for a modal, the join flow modal cares about the screen around it
+being clickable, because of the standalone join view. */
 .mod-join {
     width: 27.4375rem;
+
+    @media #{$small} {
+        width: auto;
+    }
+}
+
+/* enable vertical scrolling when modal showing, if page is short */
+.modal-overlay {
+    @media #{$small-height}, #{$medium-height} {
+        overflow: auto;
+    }
+}
+
+.modal-content {
+    @media #{$small}, #{$small-height} {
+        height: unset;
+    }
 }
 
 /* lower the modal slightly to accomodate Scratch logo above it */
 .modal-sizes {
-    @media #{$medium}, #{$medium-height} {
+    @media #{$small}, #{$small-height}, #{$medium}, #{$medium-height} {
         margin: 3.5rem auto;
     }
 }

From 2a57da32a5fcca51066c1b0694e8de5ba7336c79 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 3 Oct 2019 12:39:58 -0400
Subject: [PATCH 2/2] rewrite join view scss without changing styles

---
 src/views/join/join.scss | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/views/join/join.scss b/src/views/join/join.scss
index 9aefc03fa..673258fc8 100644
--- a/src/views/join/join.scss
+++ b/src/views/join/join.scss
@@ -8,21 +8,11 @@
     left: calc(25% - 76px);
 
     .logo {
-      width: 76px;
-  }
+        width: 76px;
+    }
 }
 
-@media #{$small} {
-    .join {
-        left: calc(50% - 38px);
-    }
-}
-@media #{$medium} {
-    .join {
-        left: calc(50% - 38px);
-    }
-}
-@media #{$intermediate} {
+@media #{$small}, #{$medium}, #{$intermediate} {
     .join {
         left: calc(50% - 38px);
     }