Prevent page scrolling under wizard dialogs on iOS

Author: spadgett

app/styles/_core.less

@@ -7,38 +7,46 @@
   display: none !important;
 }
 
-// Prevent zooming when focusing input fields in mobile Safari. Try to only
-// target mobile devices to avoid larger-than-wanted fonts elsewhere.
-@media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 0) {
-  input[type="text"],
-  input[type="number"],
-  input[type="search"],
-  input[type="url"],
-  select,
-  select.form-control,
-  textarea,
-  textarea.form-control,
-  .console-os .ace_editor {
-    font-size: 16px;
-  }
-
-  // Fix Bootstrap modal dialog zoom on the iPhone
-  // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
-  body {
-    padding-right: 0px !important
-  }
-  .modal-open {
-    overflow-y: auto;
-  }
-}
-
-// Prevent having to tap tabs twice on iOS.
-.ios .nav-tabs > {
-  li > a:hover:before {
-    content: none;
-  }
-  li.active > a:before {
-    content: '';
+@media only screen and (max-device-width: 736px) {
+  body.ios {
+    // Fix Bootstrap modal dialog zoom on the iPhone
+    // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
+    padding-right: 0px !important;
+
+    // Prevent page from scrolling underneath modals and wizard overlays.
+    &.modal-open, &.overlay-open {
+      overflow-y: auto;
+      position: fixed;
+    }
+
+    // Prevent zooming when focusing input fields in mobile Safari. Only
+    // target iPhones to avoid larger-than-wanted fonts elsewhere.
+    input[type="text"],
+    input[type="number"],
+    input[type="search"],
+    input[type="url"],
+    select,
+    select.form-control,
+    textarea,
+    textarea.form-control,
+    .console-os .ace_editor {
+      font-size: 16px;
+    }
+
+    // Make sure buttons are visible always on iPhone X.
+    .catalogs-overlay-panel .wizard-pf-main {
+      max-height: calc(100vh ~"-" 275px);
+    }
+
+    // Prevent having to tap tabs twice on iOS.
+    .nav-tabs > {
+      li > a:hover:before {
+        content: none;
+      }
+      li.active > a:before {
+        content: '';
+      }
+    }
   }
 }
 

app/styles/_scrollbars.less

@@ -2,59 +2,61 @@
 // Scrollbars for main flex containers
 // ------------------------------------------------------
 
-::-webkit-scrollbar {
-  height: 10px;
-  overflow: visible;
-  width: @scrollbar-width;
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: @scrollbar-thumb;
-  border: solid transparent;
-  border-width: 1px 1px 1px 1px;
-  box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
-  max-height: 60px;
-  min-height: 28px;
-  padding: 100px 0 0;
-  &:active,
-  &:hover {
-    background-color: @scrollbar-thumb-hover;
+not(.ios) {
+  ::-webkit-scrollbar {
+    height: 10px;
+    overflow: visible;
+    width: @scrollbar-width;
   }
-}
 
-::-webkit-scrollbar-track {
-  background-clip:padding-box;
-  background-color: @scrollbar-track;
-}
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 
-.chromeless .middle,
-.landing,
-.landing-side-bar,
-.log-view .log-view-output,
-.project-bar .dropdown-menu {
-  &::-webkit-scrollbar-thumb {
-    background-color: @scrollbar-thumb-inverse;
-    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+  ::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: @scrollbar-thumb;
+    border: solid transparent;
+    border-width: 1px 1px 1px 1px;
+    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
+    max-height: 60px;
+    min-height: 28px;
+    padding: 100px 0 0;
     &:active,
     &:hover {
-      background-color: @scrollbar-thumb-hover-inverse;
+      background-color: @scrollbar-thumb-hover;
     }
   }
-}
 
-.landing::-webkit-scrollbar-track {
-  background-color: @scrollbar-track-landing;
-}
+  ::-webkit-scrollbar-track {
+    background-clip:padding-box;
+    background-color: @scrollbar-track;
+  }
 
-.landing-side-bar::-webkit-scrollbar-track {
-  background-color: @scrollbar-track-landing-side-bar;
-}
+  .chromeless .middle,
+  .landing,
+  .landing-side-bar,
+  .log-view .log-view-output,
+  .project-bar .dropdown-menu {
+    &::-webkit-scrollbar-thumb {
+      background-color: @scrollbar-thumb-inverse;
+      box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+      &:active,
+      &:hover {
+        background-color: @scrollbar-thumb-hover-inverse;
+      }
+    }
+  }
 
-.project-bar ::-webkit-scrollbar-track {
-  background-color: @scrollbar-track-inverse;
+  .landing::-webkit-scrollbar-track {
+    background-color: @scrollbar-track-landing;
+  }
+
+  .landing-side-bar::-webkit-scrollbar-track {
+    background-color: @scrollbar-track-landing-side-bar;
+  }
+
+  .project-bar ::-webkit-scrollbar-track {
+    background-color: @scrollbar-track-inverse;
+  }
 }