Improve the width of outside regions for better responsiveness on sma…

…ller screens.

scss/boost_union/post.scss

@@ -857,6 +857,7 @@ body.theme-boost-union-commincourse {
         #page .main-inner-outside-left-right .main-inner,
         #page .main-inner-outside-left .main-inner,
         #page .main-inner-outside-right .main-inner {
+            max-width: 100%; /* This width makes the content fully expand in responsive view. */
             width: auto;
         }
     }
@@ -888,9 +889,11 @@ body.theme-boost-union-commincourse {
 @include media-breakpoint-only(lg) {
     /* Reduced the left region block to maximum width, so the center main content & right block region
     align nearer to the left block region */
-    #theme-block-region-outside-left,
-    #theme-block-region-outside-right {
-        max-width: 300px;
+    .main-inner-outside-left-right {
+        #theme-block-region-outside-left,
+        #theme-block-region-outside-right {
+            max-width: 200px;
+        }
     }
 
     /* Use possible width for the main content */
@@ -931,10 +934,23 @@ body.theme-boost-union-commincourse {
             align-items: center;
         }
     }
-    /* Removed the padding on left and right side of the main region content */
-    body.limitedwidth #page.drawers .main-inner-wrapper .main-inner {
-        padding-left: 0;
-        padding-right: 0;
+    /* Removed the left and right padding from the main content region. */
+    body.limitedwidth #page.drawers .main-inner-wrapper {
+        .main-inner {
+            padding: 0;
+            margin-bottom: 0;
+            .header-maxwidth,
+            div[role="main"] {
+                padding-left: 0;
+                padding-right: 0;
+                padding-bottom: 0;
+                margin-bottom: 0;
+            }
+        }
+        /* Removed the bottom margin of the right region block. */
+        #theme-block-region-outside-right {
+            margin-bottom: 3rem;
+        }
     }
 }
 
@@ -943,7 +959,7 @@ body.theme-boost-union-commincourse {
     /* Padding has been added to the center region block, which contains the left and right regions,
     as well as the main content region, to create space between the main content and the window screen. */
     body.limitedwidth #page.drawers .main-inner-wrapper {
-        padding: 0 15px;
+        padding: 15px;
     }
 }
 
@@ -994,7 +1010,7 @@ body.theme-boost-union-commincourse {
 }
 
 /* Additional styling for content width regions to limit the block region size on Moodle pages with limited width. */
-body.limitedwidth #theme-block-region-outside-top.theme-block-region-outside-coursecontentwidth,
+body.limitedwidth .theme-block-region-outside-coursecontentwidth,
 body.limitedwidth .theme-block-region-footer-coursecontentwidth {
     max-width: $course-content-maxwidth;
 }