Cross browser fix for modal scroll and age range input stepper. (#1174)

Author: frano-m

spa/src/app/files/facet/facet-age-range/facet-age-range-form/facet-age-range-form.component.scss

@@ -6,20 +6,6 @@
  */
 @import "../../../../site/theme/cgl.vars";
 
-
-:host {
-    display: block;
-    width: 282px; /* Min width */
-}
-
-/* Facet double width of a standard facet */
-:host-context(.facet-double-wide) {
-    :host {
-        width: 396px;
-    }
-}
-
-
 /* Facet age range form */
 form {
 
@@ -90,12 +76,18 @@ form {
         }
     }
 
+    /* Input - hide spinner - chrome, safari */
     input[type=number]::-webkit-inner-spin-button,
     input[type=number]::-webkit-outer-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }
 
+    /* Input - hide spinner - firefox */
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
     /* Actions */
     .actions {
         display: flex;

spa/src/app/files/project-download-manifest-modal-container/project-download-manifest-modal-container.component.scss

@@ -15,8 +15,16 @@
     max-width: 100vw !important; /** Override Material default that is added as inline style */
     min-width: 100vw;
     min-height: calc(100vh - 60px);
-    overflow: scroll;
+    -ms-overflow-style: none; // IE 10+, scrollbar hidden
+    overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
+    scrollbar-width: none; // Firefox, scrollbar hidden
     top: 0;
+
+    // Safari and Chrome, scrollbar hidden
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+    }
 }
 
 .panel-invisible .mat-dialog-container {

spa/src/app/files/project-download-matrix-modal-container/project-download-matrix-modal-container.component.scss

@@ -15,8 +15,16 @@
     max-width: 100vw !important; /** Override Material default that is added as inline style */
     min-width: 100vw;
     min-height: calc(100vh - 60px);
-    overflow: scroll;
+    -ms-overflow-style: none; // IE 10+, scrollbar hidden
+    overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
+    scrollbar-width: none; // Firefox, scrollbar hidden
     top: 0;
+
+    // Safari and Chrome, scrollbar hidden
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+    }
 }
 
 .panel-invisible .mat-dialog-container {

spa/src/app/files/releases/release-files-modal-container/release-files-modal-container.component.scss

@@ -15,8 +15,16 @@
     max-width: 100vw !important; /* Override Material default that is added as inline style */
     min-width: 100vw;
     min-height: calc(100vh - 60px);
-    overflow: scroll;
+    -ms-overflow-style: none; // IE 10+, scrollbar hidden
+    overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
+    scrollbar-width: none; // Firefox, scrollbar hidden
     top: 0;
+
+    // Safari and Chrome, scrollbar hidden
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+    }
 }
 
 .panel-invisible .mat-dialog-container {

spa/src/app/files/releases/visualizations-modal-container/release-visualizations-modal-container.component.scss

@@ -15,8 +15,16 @@
     max-width: 100vw !important; /* Override Material default that is added as inline style */
     min-width: 100vw;
     min-height: calc(100vh - 60px);
-    overflow: scroll;
+    -ms-overflow-style: none; // IE 10+, scrollbar hidden
+    overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
+    scrollbar-width: none; // Firefox, scrollbar hidden
     top: 0;
+
+    // Safari and Chrome, scrollbar hidden
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+    }
 }
 
 .panel-invisible .mat-dialog-container {