diff --git a/src/components/custom-procedures/custom-procedures.css b/src/components/custom-procedures/custom-procedures.css
index 1716baab306a5b5b4a877831aaff8ee8dfbe5dda..54053cdc42e21021201a2bdd173cb543cc048290 100644
--- a/src/components/custom-procedures/custom-procedures.css
+++ b/src/components/custom-procedures/custom-procedures.css
@@ -3,6 +3,7 @@
 
 .modal-content {
     width: 700px;
+    margin: 50px auto; /* This modal is taller than most, reduce top margin */
 }
 
 .body {
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 049bf1042313b180964561579fb0f37c4750884e..3e4d763c4817107abd738ec6c4c8367aae8246d6 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -311,3 +311,11 @@ $fade-out-distance: 15px;
     position: absolute;
     margin-top: 53px;
 }
+
+/*
+    Make the (background) page not scrollable when modals are open
+    This CSS class is automatically added to the body when react-modal is open
+*/
+:global(.ReactModal__Body--open) {
+    overflow: hidden;
+}