MDL-76150 theme_boost: fix sticky header position on narrow screens

abgreeve · Apr 5, 2023 · 5a890b5 · 5a890b5
1 parent 6ca40f5
commit 5a890b5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss
@@ -537,8 +537,13 @@
         }
 
         th.header {
+            @include media-breakpoint-down(sm) {
+                left: 0;
+            }
+            @include media-breakpoint-up(md) {
+                left: -3rem;
+            }
             position: sticky;
-            left: -3rem;
             z-index: 1;
         }
 

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -34989,9 +34989,18 @@ p.arrow_button {
 }
 .path-grade-report-grader .gradeparent th.header {
   position: sticky;
-  left: -3rem;
   z-index: 1;
 }
+@media (max-width: 767.98px) {
+  .path-grade-report-grader .gradeparent th.header {
+    left: 0;
+  }
+}
+@media (min-width: 768px) {
+  .path-grade-report-grader .gradeparent th.header {
+    left: -3rem;
+  }
+}
 .path-grade-report-grader .gradeparent td.noborder {
   border-right: transparent;
 }

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -34989,9 +34989,18 @@ p.arrow_button {
 }
 .path-grade-report-grader .gradeparent th.header {
   position: sticky;
-  left: -3rem;
   z-index: 1;
 }
+@media (max-width: 767.98px) {
+  .path-grade-report-grader .gradeparent th.header {
+    left: 0;
+  }
+}
+@media (min-width: 768px) {
+  .path-grade-report-grader .gradeparent th.header {
+    left: -3rem;
+  }
+}
 .path-grade-report-grader .gradeparent td.noborder {
   border-right: transparent;
 }