diff --git a/theme/boost/scss/moodle/sticky-footer.scss b/theme/boost/scss/moodle/sticky-footer.scss
index 348b0a5fbac..8e10985bde4 100644
--- a/theme/boost/scss/moodle/sticky-footer.scss
+++ b/theme/boost/scss/moodle/sticky-footer.scss
@@ -18,6 +18,38 @@ body {
     overflow: hidden;
     box-shadow: 0 0 1rem rgba($black, .15);
     font-size: calc(#{$font-size-base} * 1.10);
+    // Adjust sticky footer width to the main content area.
+    .sticky-footer-content {
+        @include media-breakpoint-up(md) {
+            .pagelayout-standard &,
+            body.limitedwidth.uses-drawers & {
+                max-width: $course-content-maxwidth;
+            }
+            body.mediumwidth.uses-drawers & {
+                max-width: $medium-content-maxwidth;
+            }
+        }
+    }
+    // Adjust sticky footer width when drawers are open.
+    .sticky-footer-content-wrapper {
+        @include transition(0.2s);
+        @include media-breakpoint-up(lg) {
+            .drawers {
+                padding: 0 3rem;
+            }
+            .show-drawer-left & {
+                margin-left: $drawer-left-width;
+                padding: 0 3rem 0 1rem;
+            }
+            .show-drawer-right & {
+                margin-right: $drawer-right-width;
+                padding: 0 1rem 0 3rem;
+            }
+            .show-drawer-right.show-drawer-left & {
+                padding: 0 1rem;
+            }
+        }
+    }
 }
 
 .hasstickyfooter .stickyfooter {
diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss
index 51341d4c3c3..9670cc4fc9a 100644
--- a/theme/boost/scss/moodle/variables.scss
+++ b/theme/boost/scss/moodle/variables.scss
@@ -23,7 +23,7 @@ $primary-nav-padding-y: ($spacer * 0.25) !default;
 $primary-nav-padding-x: ($spacer * 0.5) !default;
 
 $navbar-height: 60px !default;
-$stickyfooter-height: calc(max(96px, calc(#{$font-size-base} * 3))) !default;
+$stickyfooter-height: calc(max(80px, calc(#{$font-size-base} * 3))) !default;
 $course-content-maxwidth: 830px !default;
 $medium-content-maxwidth: 1120px !default;
 $h5p-content-maxwidth: 960px !default;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 06cbfe8dccf..b1a49c1b4cd 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -25134,11 +25134,11 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 }
 
 .hasstickyfooter .btn-footer-popover {
-  bottom: calc(1rem + max(96px, 0.9375rem * 3));
+  bottom: calc(1rem + max(80px, 0.9375rem * 3));
 }
 
 .hasstickyfooter .btn-footer-communication {
-  bottom: calc(4rem + max(96px, 0.9375rem * 3));
+  bottom: calc(4rem + max(80px, 0.9375rem * 3));
 }
 
 .popover.footer .popover-body {
@@ -35765,7 +35765,7 @@ p.arrow_button {
   border-right: transparent;
 }
 .path-grade-report-grader.hasstickyfooter .gradeparent tr.lastrow {
-  bottom: calc(max(96px, 0.9375rem * 3) - 1px);
+  bottom: calc(max(80px, 0.9375rem * 3) - 1px);
 }
 
 /**
@@ -36179,14 +36179,46 @@ body {
   position: fixed;
   right: 0;
   left: 0;
-  height: max(96px, 0.9375rem * 3);
-  bottom: calc(max(96px, 0.9375rem * 3) * -1);
+  height: max(80px, 0.9375rem * 3);
+  bottom: calc(max(80px, 0.9375rem * 3) * -1);
   transition: bottom 0.5s;
   z-index: 1030;
   overflow: hidden;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
   font-size: calc(0.9375rem * 1.10);
 }
+@media (min-width: 768px) {
+  .pagelayout-standard .stickyfooter .sticky-footer-content, body.limitedwidth.uses-drawers .stickyfooter .sticky-footer-content {
+    max-width: 830px;
+  }
+  body.mediumwidth.uses-drawers .stickyfooter .sticky-footer-content {
+    max-width: 1120px;
+  }
+}
+.stickyfooter .sticky-footer-content-wrapper {
+  transition: 0.2s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .stickyfooter .sticky-footer-content-wrapper {
+    transition: none;
+  }
+}
+@media (min-width: 992px) {
+  .stickyfooter .sticky-footer-content-wrapper .drawers {
+    padding: 0 3rem;
+  }
+  .show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
+    margin-left: 285px;
+    padding: 0 3rem 0 1rem;
+  }
+  .show-drawer-right .stickyfooter .sticky-footer-content-wrapper {
+    margin-right: 315px;
+    padding: 0 1rem 0 3rem;
+  }
+  .show-drawer-right.show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
+    padding: 0 1rem;
+  }
+}
 
 .hasstickyfooter .stickyfooter {
   bottom: 0;
@@ -36965,7 +36997,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   .hasstickyfooter .drawer-left,
   .hasstickyfooter .drawer-right {
     top: 60px;
-    height: calc(100vh - 60px - max(96px, 0.9375rem * 3));
+    height: calc(100vh - 60px - max(80px, 0.9375rem * 3));
   }
   #page.drawers {
     position: relative;
@@ -37005,7 +37037,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
 }
 @media (min-width: 992px) {
   #page.drawers.hasstickyfooter {
-    margin-bottom: max(96px, 0.9375rem * 3);
+    margin-bottom: max(80px, 0.9375rem * 3);
   }
 }
 .drawercontrolbuttons {
diff --git a/theme/boost/templates/core/sticky_footer.mustache b/theme/boost/templates/core/sticky_footer.mustache
index 9508a1d9dc7..cf16e8dcd83 100644
--- a/theme/boost/templates/core/sticky_footer.mustache
+++ b/theme/boost/templates/core/sticky_footer.mustache
@@ -43,11 +43,7 @@
 }}
 <div
     id="sticky-footer"
-    class="d-flex flex-row align-items-center stickyfooter px-3 py-2 fixed-bottom bg-white border-top {{!
-        }} {{$ stickyclasses }}{{!
-            }}{{# stickyclasses }}{{ stickyclasses }}{{/ stickyclasses }}{{!
-            }}{{^ stickyclasses }}justify-content-end{{/ stickyclasses }}{{!
-        }}{{/ stickyclasses }}"
+    class="stickyfooter bg-white border-top"
     {{$ disable }}
         {{#disable}} data-disable="true" {{/disable}}
     {{/ disable }}
@@ -57,9 +53,18 @@
         {{/extras}}
     {{/ extradata }}
 >
-    {{$ stickycontent }}
-        {{{stickycontent}}}
-    {{/ stickycontent }}
+    <div class="sticky-footer-content-wrapper h-100 d-flex justify-content-center">
+        <div class="sticky-footer-content w-100 d-flex align-items-center px-3 py-2 {{!
+            }} {{$ stickyclasses }}{{!
+                }}{{# stickyclasses }}{{ stickyclasses }}{{/ stickyclasses }}{{!
+                }}{{^ stickyclasses }}justify-content-end{{/ stickyclasses }}{{!
+            }}{{/ stickyclasses }}"
+        >
+            {{$ stickycontent }}
+                {{{stickycontent}}}
+            {{/ stickycontent }}
+        </div>
+    </div>
 </div>
 {{#js}}
 require(['theme_boost/sticky-footer'], function(footer) {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d6adb76f1e5..5863fd95317 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -25134,11 +25134,11 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 }
 
 .hasstickyfooter .btn-footer-popover {
-  bottom: calc(1rem + max(96px, 0.9375rem * 3));
+  bottom: calc(1rem + max(80px, 0.9375rem * 3));
 }
 
 .hasstickyfooter .btn-footer-communication {
-  bottom: calc(4rem + max(96px, 0.9375rem * 3));
+  bottom: calc(4rem + max(80px, 0.9375rem * 3));
 }
 
 .popover.footer .popover-body {
@@ -35765,7 +35765,7 @@ p.arrow_button {
   border-right: transparent;
 }
 .path-grade-report-grader.hasstickyfooter .gradeparent tr.lastrow {
-  bottom: calc(max(96px, 0.9375rem * 3) - 1px);
+  bottom: calc(max(80px, 0.9375rem * 3) - 1px);
 }
 
 /**
@@ -36113,14 +36113,46 @@ body {
   position: fixed;
   right: 0;
   left: 0;
-  height: max(96px, 0.9375rem * 3);
-  bottom: calc(max(96px, 0.9375rem * 3) * -1);
+  height: max(80px, 0.9375rem * 3);
+  bottom: calc(max(80px, 0.9375rem * 3) * -1);
   transition: bottom 0.5s;
   z-index: 1030;
   overflow: hidden;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
   font-size: calc(0.9375rem * 1.10);
 }
+@media (min-width: 768px) {
+  .pagelayout-standard .stickyfooter .sticky-footer-content, body.limitedwidth.uses-drawers .stickyfooter .sticky-footer-content {
+    max-width: 830px;
+  }
+  body.mediumwidth.uses-drawers .stickyfooter .sticky-footer-content {
+    max-width: 1120px;
+  }
+}
+.stickyfooter .sticky-footer-content-wrapper {
+  transition: 0.2s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .stickyfooter .sticky-footer-content-wrapper {
+    transition: none;
+  }
+}
+@media (min-width: 992px) {
+  .stickyfooter .sticky-footer-content-wrapper .drawers {
+    padding: 0 3rem;
+  }
+  .show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
+    margin-left: 285px;
+    padding: 0 3rem 0 1rem;
+  }
+  .show-drawer-right .stickyfooter .sticky-footer-content-wrapper {
+    margin-right: 315px;
+    padding: 0 1rem 0 3rem;
+  }
+  .show-drawer-right.show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
+    padding: 0 1rem;
+  }
+}
 
 .hasstickyfooter .stickyfooter {
   bottom: 0;
@@ -36899,7 +36931,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   .hasstickyfooter .drawer-left,
   .hasstickyfooter .drawer-right {
     top: 50px;
-    height: calc(100vh - 50px - max(96px, 0.9375rem * 3));
+    height: calc(100vh - 50px - max(80px, 0.9375rem * 3));
   }
   #page.drawers {
     position: relative;
@@ -36939,7 +36971,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
 }
 @media (min-width: 992px) {
   #page.drawers.hasstickyfooter {
-    margin-bottom: max(96px, 0.9375rem * 3);
+    margin-bottom: max(80px, 0.9375rem * 3);
   }
 }
 .drawercontrolbuttons {
@@ -39115,5 +39147,5 @@ body {
 }
 
 body.hasstickyfooter #page-footer {
-  padding-bottom: calc(1rem * .5 + max(96px, 0.9375rem * 3));
+  padding-bottom: calc(1rem * .5 + max(80px, 0.9375rem * 3));
 }
\ No newline at end of file