From 6600befb62f9df16d0fbe2ada165c1b882235af8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 6 Mar 2026 13:42:46 +0100
Subject: [PATCH] MDL-88148 theme_boost: Fix drawers toggle alignment

---
 public/theme/boost/scss/moodle/drawer.scss   |  8 ++++++--
 public/theme/boost/style/moodle.css          | 16 ++++++++++------
 public/theme/boost/templates/drawer.mustache |  2 +-
 public/theme/classic/style/moodle.css        | 16 ++++++++++------
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/public/theme/boost/scss/moodle/drawer.scss b/public/theme/boost/scss/moodle/drawer.scss
index b42f27a05db..cd1e6ae472c 100644
--- a/public/theme/boost/scss/moodle/drawer.scss
+++ b/public/theme/boost/scss/moodle/drawer.scss
@@ -198,7 +198,7 @@ $right-drawer-width: 320px;
 
         .drawertoggle {
             margin-left: auto;
-            margin-right: 5px;
+            margin-right: map-get($spacers, 2);
         }
     }
     &.drawer-left {
@@ -216,7 +216,7 @@ $right-drawer-width: 320px;
 
         .drawertoggle {
             margin-left: auto;
-            margin-right: 5px;
+            margin-right: map-get($spacers, 2);
         }
     }
     &.drawer-bottom {
@@ -275,7 +275,11 @@ $right-drawer-width: 320px;
     }
     .draweractions {
         display: flex;
+        gap: map-get($spacers, 1);
         margin-left: map-get($spacers, 2);
+        .btn {
+            --#{$prefix}btn-color: #{$gray-700};
+        }
     }
 }
 .drawer.scrolled .drawerheader {
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index 334dc7cf5bb..9f9885262cc 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -32208,7 +32208,7 @@ body.drawer-ease {
 }
 .drawer.drawer-right .drawertoggle {
   margin-left: auto;
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .drawer.drawer-left {
   transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
@@ -32228,7 +32228,7 @@ body.drawer-ease {
 }
 .drawer.drawer-left .drawertoggle {
   margin-left: auto;
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .drawer.drawer-bottom {
   bottom: -110%;
@@ -32269,8 +32269,12 @@ body.drawer-ease {
 }
 .drawerheader .draweractions {
   display: flex;
+  gap: 0.25rem;
   margin-left: 0.5rem;
 }
+.drawerheader .draweractions .btn {
+  --bs-btn-color: #495057;
+}
 
 .drawer.scrolled .drawerheader {
   box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25);
@@ -32319,7 +32323,7 @@ body.drawer-ease {
 @media (max-width: 991.98px) {
   .drawer-md.drawer-right .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 991.98px) {
@@ -32345,7 +32349,7 @@ body.drawer-ease {
 @media (max-width: 991.98px) {
   .drawer-md.drawer-left .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 991.98px) {
@@ -32405,7 +32409,7 @@ body.drawer-ease {
 @media (max-width: 767.98px) {
   .drawer-sm.drawer-right .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 767.98px) {
@@ -32431,7 +32435,7 @@ body.drawer-ease {
 @media (max-width: 767.98px) {
   .drawer-sm.drawer-left .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 767.98px) {
diff --git a/public/theme/boost/templates/drawer.mustache b/public/theme/boost/templates/drawer.mustache
index 44c8100c15e..f36d0d046b8 100644
--- a/public/theme/boost/templates/drawer.mustache
+++ b/public/theme/boost/templates/drawer.mustache
@@ -44,7 +44,7 @@
                 {{$drawerheadercontent}}{{/drawerheadercontent}}
             </div>
             <button
-                class="btn btn-icon drawertoggle"
+                class="btn btn-icon icon-size-3 drawertoggle"
                 data-toggler="drawers"
                 data-action="closedrawer"
                 data-target="{{$id}}{{/id}}"
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index 11704b21801..d60d510c5be 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -32208,7 +32208,7 @@ body.drawer-ease {
 }
 .drawer.drawer-right .drawertoggle {
   margin-left: auto;
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .drawer.drawer-left {
   transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
@@ -32228,7 +32228,7 @@ body.drawer-ease {
 }
 .drawer.drawer-left .drawertoggle {
   margin-left: auto;
-  margin-right: 5px;
+  margin-right: 0.5rem;
 }
 .drawer.drawer-bottom {
   bottom: -110%;
@@ -32269,8 +32269,12 @@ body.drawer-ease {
 }
 .drawerheader .draweractions {
   display: flex;
+  gap: 0.25rem;
   margin-left: 0.5rem;
 }
+.drawerheader .draweractions .btn {
+  --bs-btn-color: #495057;
+}
 
 .drawer.scrolled .drawerheader {
   box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25);
@@ -32319,7 +32323,7 @@ body.drawer-ease {
 @media (max-width: 991.98px) {
   .drawer-md.drawer-right .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 991.98px) {
@@ -32345,7 +32349,7 @@ body.drawer-ease {
 @media (max-width: 991.98px) {
   .drawer-md.drawer-left .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 991.98px) {
@@ -32405,7 +32409,7 @@ body.drawer-ease {
 @media (max-width: 767.98px) {
   .drawer-sm.drawer-right .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 767.98px) {
@@ -32431,7 +32435,7 @@ body.drawer-ease {
 @media (max-width: 767.98px) {
   .drawer-sm.drawer-left .drawertoggle {
     margin-left: auto;
-    margin-right: 5px;
+    margin-right: 0.5rem;
   }
 }
 @media (max-width: 767.98px) {