diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 96d709141..40e8b48e2 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1274,10 +1274,7 @@ ul.content-module-activities {
   }
 
 }
-// Import json protocols.io protocol modal
-#modal-import-json-protocol-preview .modal-dialog {
-  width: 70%;
-}
+// Protocolsio Import protocol modal
 
 .import-protocols-modal-preview-container-json {
   height: 300px;
@@ -1301,6 +1298,26 @@ ul.content-module-activities {
   }
 
 }
+// Protocolsio Preview protocol modal
+@media (min-width: 768px) {
+  #modal-import-json-protocol-preview .modal-dialog {
+    width: 70%;
+
+  }
+}
+
+#modal-import-json-protocol-preview .modal-dialog {
+  .modal-body {
+    max-height: 75vh;
+    overflow-x: scroll;
+    overflow-y: auto;
+    width: 100%;
+
+    .ql-editor {
+      min-height: initial;
+    }
+  }
+}
 /* Steps and Results */
 #steps {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAAIUlEQVQImWNgoD5gZGBgMILSjKRo/P//vwiSGQwMDAwMAEnaA0jgHoquAAAAAElFTkSuQmCC");
diff --git a/app/views/protocols/import_export/_import_json_protocol_preview_modal.html.erb b/app/views/protocols/import_export/_import_json_protocol_preview_modal.html.erb
index 517cfbfab..bf10fb540 100644
--- a/app/views/protocols/import_export/_import_json_protocol_preview_modal.html.erb
+++ b/app/views/protocols/import_export/_import_json_protocol_preview_modal.html.erb
@@ -13,9 +13,9 @@
 <div
   id="modal-import-json-protocol-preview"
   class="modal fade"
-  role="dialog"
-  tabindex="-1">
-  <div class="modal-dialog">
+  tabindex="-1"
+  role="dialog">
+  <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>