From a116529bb5a97c892f8c20e1c7a1b5f186e36011 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Wed, 17 Aug 2022 16:00:52 +0200
Subject: [PATCH] MDL-74315 reportbuilder: Fix report filters hidden under top
 navbar

- Add scrolling to big filter containers to avoid them to be hidden under header
- Remove custom reportbuilder scrollbar mixin and replace it with 'thin-scrolls'
  standard mixin
---
 theme/boost/scss/moodle/reportbuilder.scss | 37 ++++------
 theme/boost/style/moodle.css               | 80 ++++++++++++++--------
 theme/classic/style/moodle.css             | 80 ++++++++++++++--------
 3 files changed, 120 insertions(+), 77 deletions(-)

diff --git a/theme/boost/scss/moodle/reportbuilder.scss b/theme/boost/scss/moodle/reportbuilder.scss
index bcc0e6c569a..0a6551e49e3 100644
--- a/theme/boost/scss/moodle/reportbuilder.scss
+++ b/theme/boost/scss/moodle/reportbuilder.scss
@@ -17,9 +17,16 @@
     .filters-dropdown {
         width: 27rem;
         padding: 0;
+        z-index: $zindex-modal;
+        overflow: hidden;
         @include media-breakpoint-down(sm) {
             width: 100%;
         }
+        .reportbuilder-filters-sidebar {
+            max-height: calc(100vh - #{$navbar-height} - 1rem);
+            overflow-y: auto;
+            @include thin-scrolls($white);
+        }
     }
     .reportbuilder-filters-wrapper,
     .reportbuilder-conditions-list {
@@ -64,26 +71,6 @@
     }
 }
 
-/**
-* Styled scrollbar with left padding for webkit browsers.
-*/
-@mixin reportbuilder-scrollbar() {
-    $inner-scrollbar-thumb: $secondary;
-    $inner-scrollbar-track: lighten($secondary, 40%);
-    &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        appearance: none;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: $inner-scrollbar-thumb;
-        border-left: 5px solid $white;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: $inner-scrollbar-track;
-        border-left: 5px solid $white;
-    }
-}
-
 /**
 * Custom Reports.
 */
@@ -137,13 +124,13 @@ $rb-right-sidebar-width: 350px;
 }
 .reportbuilder-sidebar-menu-cards {
     overflow-y: auto;
-    @include reportbuilder-scrollbar;
+    @include thin-scrolls($gray-100);
 }
 
 /* Settings sidebar */
 .reportbuilder-sidebar-settings {
     overflow-y: auto;
-    @include reportbuilder-scrollbar;
+    @include thin-scrolls($gray-100);
     @include media-breakpoint-up(lg) {
         width: $rb-right-sidebar-width;
         flex-shrink: 0;
@@ -249,7 +236,7 @@ $rb-right-sidebar-width: 350px;
         .reportbuilder-report[data-editing] .reportbuilder-report-container {
             max-height: calc(100vh - #{$sidebar-margin-top});
             overflow-y: auto;
-            @include reportbuilder-scrollbar;
+            @include thin-scrolls($gray-100);
             margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
             margin-right: calc(#{$rb-right-sidebar-width} + 1rem);
         }
@@ -258,6 +245,10 @@ $rb-right-sidebar-width: 350px;
         }
     }
 }
+// Fix popper.js behaviour in fullpage report (using 'popup' page layout).
+#page-admin-reportbuilder-edit #page {
+    overflow-y: auto;
+}
 
 /* Toggle cards. */
 .reportbuilder-toggle-card {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 7120d1ba330..d65f2fbcc19 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -21213,10 +21213,27 @@ div.editor_atto_toolbar button .icon {
 /* Filters */
 .reportbuilder-wrapper .filters-dropdown {
   width: 27rem;
-  padding: 0; }
+  padding: 0;
+  z-index: 1050;
+  overflow: hidden; }
   @media (max-width: 767.98px) {
     .reportbuilder-wrapper .filters-dropdown {
       width: 100%; } }
+  .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar {
+    max-height: calc(100vh - 60px - 1rem);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #6a737b #fff; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar {
+      width: 12px; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-track {
+      background: #fff; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb {
+      background-color: #6a737b;
+      border-radius: 20px;
+      border: 3px solid #fff; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb:hover {
+      background-color: #495057; }
 
 .reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-3,
 .reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-9,
@@ -21253,9 +21270,6 @@ div.editor_atto_toolbar button .icon {
     text-overflow: clip;
     word-break: break-all; }
 
-/**
-* Styled scrollbar with left padding for webkit browsers.
-*/
 /**
 * Custom Reports.
 */
@@ -21293,29 +21307,35 @@ div.editor_atto_toolbar button .icon {
     font-size: 12px; }
 
 .reportbuilder-sidebar-menu-cards {
-  overflow-y: auto; }
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #6a737b #f8f9fa; }
   .reportbuilder-sidebar-menu-cards::-webkit-scrollbar {
-    -webkit-appearance: none;
-    appearance: none; }
-  .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
-    background-color: #ced4da;
-    border-left: 5px solid #fff; }
+    width: 12px; }
   .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-track {
-    background-color: white;
-    border-left: 5px solid #fff; }
+    background: #f8f9fa; }
+  .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
+    background-color: #6a737b;
+    border-radius: 20px;
+    border: 3px solid #f8f9fa; }
+  .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb:hover {
+    background-color: #495057; }
 
 /* Settings sidebar */
 .reportbuilder-sidebar-settings {
-  overflow-y: auto; }
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #6a737b #f8f9fa; }
   .reportbuilder-sidebar-settings::-webkit-scrollbar {
-    -webkit-appearance: none;
-    appearance: none; }
-  .reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
-    background-color: #ced4da;
-    border-left: 5px solid #fff; }
+    width: 12px; }
   .reportbuilder-sidebar-settings::-webkit-scrollbar-track {
-    background-color: white;
-    border-left: 5px solid #fff; }
+    background: #f8f9fa; }
+  .reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
+    background-color: #6a737b;
+    border-radius: 20px;
+    border: 3px solid #f8f9fa; }
+  .reportbuilder-sidebar-settings::-webkit-scrollbar-thumb:hover {
+    background-color: #495057; }
   @media (min-width: 992px) {
     .reportbuilder-sidebar-settings {
       width: 350px;
@@ -21392,20 +21412,26 @@ div.editor_atto_toolbar button .icon {
   .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container {
     max-height: calc(100vh - 163px);
     overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #6a737b #f8f9fa;
     margin-left: calc(250px + 1rem);
     margin-right: calc(350px + 1rem); }
     .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar {
-      -webkit-appearance: none;
-      appearance: none; }
-    .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
-      background-color: #ced4da;
-      border-left: 5px solid #fff; }
+      width: 12px; }
     .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-track {
-      background-color: white;
-      border-left: 5px solid #fff; }
+      background: #f8f9fa; }
+    .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
+      background-color: #6a737b;
+      border-radius: 20px;
+      border: 3px solid #f8f9fa; }
+    .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb:hover {
+      background-color: #495057; }
   .path-admin-reportbuilder.pagelayout-popup .reportbuilder-audiences-container {
     margin-left: calc(250px + 1rem); } }
 
+#page-admin-reportbuilder-edit #page {
+  overflow-y: auto; }
+
 /* Toggle cards. */
 .reportbuilder-toggle-card .card-header {
   border-bottom: none; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 85667cd7740..565c2c2629c 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -21159,10 +21159,27 @@ div.editor_atto_toolbar button .icon {
 /* Filters */
 .reportbuilder-wrapper .filters-dropdown {
   width: 27rem;
-  padding: 0; }
+  padding: 0;
+  z-index: 1050;
+  overflow: hidden; }
   @media (max-width: 767.98px) {
     .reportbuilder-wrapper .filters-dropdown {
       width: 100%; } }
+  .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar {
+    max-height: calc(100vh - 50px - 1rem);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #6a737b #fff; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar {
+      width: 12px; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-track {
+      background: #fff; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb {
+      background-color: #6a737b;
+      border-radius: 20px;
+      border: 3px solid #fff; }
+    .reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb:hover {
+      background-color: #495057; }
 
 .reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-3,
 .reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-9,
@@ -21199,9 +21216,6 @@ div.editor_atto_toolbar button .icon {
     text-overflow: clip;
     word-break: break-all; }
 
-/**
-* Styled scrollbar with left padding for webkit browsers.
-*/
 /**
 * Custom Reports.
 */
@@ -21239,29 +21253,35 @@ div.editor_atto_toolbar button .icon {
     font-size: 12px; }
 
 .reportbuilder-sidebar-menu-cards {
-  overflow-y: auto; }
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #6a737b #f8f9fa; }
   .reportbuilder-sidebar-menu-cards::-webkit-scrollbar {
-    -webkit-appearance: none;
-    appearance: none; }
-  .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
-    background-color: #ced4da;
-    border-left: 5px solid #fff; }
+    width: 12px; }
   .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-track {
-    background-color: white;
-    border-left: 5px solid #fff; }
+    background: #f8f9fa; }
+  .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
+    background-color: #6a737b;
+    border-radius: 20px;
+    border: 3px solid #f8f9fa; }
+  .reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb:hover {
+    background-color: #495057; }
 
 /* Settings sidebar */
 .reportbuilder-sidebar-settings {
-  overflow-y: auto; }
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #6a737b #f8f9fa; }
   .reportbuilder-sidebar-settings::-webkit-scrollbar {
-    -webkit-appearance: none;
-    appearance: none; }
-  .reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
-    background-color: #ced4da;
-    border-left: 5px solid #fff; }
+    width: 12px; }
   .reportbuilder-sidebar-settings::-webkit-scrollbar-track {
-    background-color: white;
-    border-left: 5px solid #fff; }
+    background: #f8f9fa; }
+  .reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
+    background-color: #6a737b;
+    border-radius: 20px;
+    border: 3px solid #f8f9fa; }
+  .reportbuilder-sidebar-settings::-webkit-scrollbar-thumb:hover {
+    background-color: #495057; }
   @media (min-width: 992px) {
     .reportbuilder-sidebar-settings {
       width: 350px;
@@ -21338,20 +21358,26 @@ div.editor_atto_toolbar button .icon {
   .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container {
     max-height: calc(100vh - 153px);
     overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #6a737b #f8f9fa;
     margin-left: calc(250px + 1rem);
     margin-right: calc(350px + 1rem); }
     .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar {
-      -webkit-appearance: none;
-      appearance: none; }
-    .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
-      background-color: #ced4da;
-      border-left: 5px solid #fff; }
+      width: 12px; }
     .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-track {
-      background-color: white;
-      border-left: 5px solid #fff; }
+      background: #f8f9fa; }
+    .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
+      background-color: #6a737b;
+      border-radius: 20px;
+      border: 3px solid #f8f9fa; }
+    .path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb:hover {
+      background-color: #495057; }
   .path-admin-reportbuilder.pagelayout-popup .reportbuilder-audiences-container {
     margin-left: calc(250px + 1rem); } }
 
+#page-admin-reportbuilder-edit #page {
+  overflow-y: auto; }
+
 /* Toggle cards. */
 .reportbuilder-toggle-card .card-header {
   border-bottom: none; }