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