Merge pull request #3430 from benjiwheeler/join-flow-responsive-fixes

Join flow responsive fixes

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 {

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 {

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;
     }
 }

src/views/join/join.scss

@@ -12,17 +12,7 @@
     }
 }
 
-@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);
     }