diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss
index 9544e1e04..a497ce96a 100644
--- a/src/components/modal/addtostudio/modal.scss
+++ b/src/components/modal/addtostudio/modal.scss
@@ -3,15 +3,17 @@
 
 .mod-addToStudio {
     min-height: 15rem;
-    max-height: calc(100% - 8rem);
+    max-height: calc(100% - 5rem);
 
     /* Some value for height must be set for scrolling to work */
-    height: 100%;
+    height: 28rem;
 
     overflow: hidden;
 
     @media #{$small}, #{$small-height} {
         overflow: hidden;
+        height: 100%;
+        max-height: 100%;
     }
 }
 
@@ -71,6 +73,12 @@
     min-height: 30rem;
 */
 
+/* provides buffer at bottom of list, so that bottommost items
+are not obscured by gradient overlay */
+.studio-list-footer-spacer {
+    height: 1.5rem;
+}
+
 .studio-list-bottom-gradient {
     position: absolute;
     right: 1rem;
diff --git a/src/components/modal/addtostudio/presentation.jsx b/src/components/modal/addtostudio/presentation.jsx
index 913ca1092..bf6725897 100644
--- a/src/components/modal/addtostudio/presentation.jsx
+++ b/src/components/modal/addtostudio/presentation.jsx
@@ -56,6 +56,7 @@ const AddToStudioModalPresentation = ({
                         <div className="studio-list-container">
                             {studioButtons}
                         </div>
+                        <div className="studio-list-footer-spacer" />
                         <div className="studio-list-bottom-gradient" />
                     </div>
                 </div>