MDL-73771 theme: Fix scrollbar position

theme/boost/amd/src/drawers.js

@@ -47,6 +47,7 @@ const CLASSES = {
     SCROLLED: 'scrolled',
     SHOW: 'show',
     NOTINITIALISED: 'not-initialized',
+    TOGGLERIGHT: '.drawer-right-toggle',
 };
 
 /**
@@ -589,6 +590,11 @@ const scroller = () => {
     const body = document.querySelector('body');
     const drawerLayout = document.querySelector(SELECTORS.CONTAINER);
     if (drawerLayout) {
+        // If there is not visible scrollbar then remove extra margin from right drawer.
+        const drawerRight = document.querySelector(SELECTORS.CONTAINER + ' ' + CLASSES.TOGGLERIGHT);
+        if (!scrollbarVisible(drawerLayout) && drawerRight) {
+            drawerRight.style.marginRight = '0';
+        }
         drawerLayout.addEventListener("scroll", () => {
             if (drawerLayout.scrollTop >= window.innerHeight) {
                 body.classList.add(CLASSES.SCROLLED);
@@ -599,6 +605,16 @@ const scroller = () => {
     }
 };
 
+/**
+ * Check if there is a visible scrollbar in the given html element.
+ *
+ * @param {object} htmlNode The html element.
+ * @returns {boolean} true if the scroll height is greater than client height.
+ */
+const scrollbarVisible = (htmlNode) => {
+   return htmlNode.scrollHeight > htmlNode.clientHeight;
+};
+
 /**
  * Set the last used attribute for the last used toggle button for a drawer.
  *

theme/boost/scss/moodle/layout.scss

@@ -181,6 +181,9 @@
     #page.drawers .main-inner {
         margin-top: 1.5rem;
     }
+    #page.drawers .drawer-right-toggle {
+        margin-right: 0.7rem;
+    }
 }
 
 @include media-breakpoint-up(md) {

theme/boost/style/moodle.css

@@ -36162,6 +36162,9 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   #page.drawers .main-inner {
     margin-top: 1.5rem;
   }
+  #page.drawers .drawer-right-toggle {
+    margin-right: 0.7rem;
+  }
 }
 @media (min-width: 768px) {
   #page.drawers {

theme/classic/style/moodle.css

@@ -36096,6 +36096,9 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   #page.drawers .main-inner {
     margin-top: 1.5rem;
   }
+  #page.drawers .drawer-right-toggle {
+    margin-right: 0.7rem;
+  }
 }
 @media (min-width: 768px) {
   #page.drawers {