Bug 1589038 - Allow about:welcome modal scrollbars to be clicked on n…

…arrow windows r=Mardak

Scrollbars are now correctly active and clickable at less than 25% of window size, regardless of the system settings for scrollbars.

Differential Revision: https://phabricator.services.mozilla.com/D55149

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss

@@ -1,3 +1,6 @@
+// Variable for the about:welcome modal scrollbars
+$modal-scrollbar-z-index: 1100;
+
 .activity-stream {
   &.modal-open {
     overflow: hidden;
@@ -12,10 +15,10 @@
   left: 0;
   width: 100%;
   display: none;
-  z-index: 1100;
 
   &.active {
     display: block;
+    position: absolute;
   }
 }
 
@@ -24,6 +27,7 @@
   width: 100%;
   height: 100%;
   overflow: auto;
+  z-index: $modal-scrollbar-z-index;
 }
 
 .modal-height {
@@ -41,11 +45,11 @@
   box-shadow: 0 1px 15px 0 $black-30;
   border-radius: 4px;
   display: none;
-  z-index: 1101;
+  z-index: $modal-scrollbar-z-index;
 
   // modal takes over entire screen
   @media(max-width: 960px) {
-    width: 100%;
+    width: auto;
     height: 100%;
     top: 0;
     left: 0;

browser/components/newtab/css/activity-stream-linux.css

@@ -3334,16 +3334,17 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
   top: 0;
   left: 0;
   width: 100%;
-  display: none;
-  z-index: 1100; }
+  display: none; }
   .modalOverlayOuter.active {
-    display: block; }
+    display: block;
+    position: absolute; }
 
 .modal-scroll {
   position: absolute;
   width: 100%;
   height: 100%;
-  overflow: auto; }
+  overflow: auto;
+  z-index: 1100; }
 
 .modal-height {
   padding-top: 80px; }
@@ -3357,10 +3358,10 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
   box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   display: none;
-  z-index: 1101; }
+  z-index: 1100; }
   @media (max-width: 960px) {
     .modalOverlayInner {
-      width: 100%;
+      width: auto;
       height: 100%;
       top: 0;
       left: 0;

browser/components/newtab/css/activity-stream-mac.css

@@ -3337,16 +3337,17 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
   top: 0;
   left: 0;
   width: 100%;
-  display: none;
-  z-index: 1100; }
+  display: none; }
   .modalOverlayOuter.active {
-    display: block; }
+    display: block;
+    position: absolute; }
 
 .modal-scroll {
   position: absolute;
   width: 100%;
   height: 100%;
-  overflow: auto; }
+  overflow: auto;
+  z-index: 1100; }
 
 .modal-height {
   padding-top: 80px; }
@@ -3360,10 +3361,10 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
   box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   display: none;
-  z-index: 1101; }
+  z-index: 1100; }
   @media (max-width: 960px) {
     .modalOverlayInner {
-      width: 100%;
+      width: auto;
       height: 100%;
       top: 0;
       left: 0;

browser/components/newtab/css/activity-stream-windows.css

@@ -3334,16 +3334,17 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
   top: 0;
   left: 0;
   width: 100%;
-  display: none;
-  z-index: 1100; }
+  display: none; }
   .modalOverlayOuter.active {
-    display: block; }
+    display: block;
+    position: absolute; }
 
 .modal-scroll {
   position: absolute;
   width: 100%;
   height: 100%;
-  overflow: auto; }
+  overflow: auto;
+  z-index: 1100; }
 
 .modal-height {
   padding-top: 80px; }
@@ -3357,10 +3358,10 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
   box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   display: none;
-  z-index: 1101; }
+  z-index: 1100; }
   @media (max-width: 960px) {
     .modalOverlayInner {
-      width: 100%;
+      width: auto;
       height: 100%;
       top: 0;
       left: 0;