Closes #3820 Full-width paragraphs have a different width in the Content region compared to other regions

modules/custom/az_paragraphs/css/az_paragraphs_full_width.css

@@ -10,31 +10,23 @@
       margin-top: var(--sidebar-top-margin);
     }
 }
-.full-width-background {
-    max-width: calc(100vw - var(--scrollbar-width));
-    margin-left: calc(50% - 50vw);
-    margin-right: calc(50% - 50vw);
-}
 /* See https://github.com/az-digital/az_quickstart/pull/1365 */
 .sidebar_first {
     z-index: 3;
 }
-.layout-sidebar-first .full-width-background,
-.layout-sidebar-second .full-width-background {
-    max-width: calc(100vw - var(--scrollbar-width));
-}
 .region-content .full-width-background {
+    max-width: calc(100vw - var(--scrollbar-width));
     margin-left: var(--full-width-left-distance);
     margin-right: var(--full-width-right-distance);
     overflow: hidden;
 }
-.region .az-full-width-row {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px;
+.region-content-top .full-width-background,
+.region-content-bottom .full-width-background
+{
+    max-width: calc(100vw - var(--scrollbar-width));
+    margin-left: var(--full-width-auto-distance);
+    margin-right: var(--full-width-auto-distance);
+    overflow: hidden;
 }
 .region-content .az-full-width-column-content {
     -ms-flex-preferred-size: 0;
@@ -126,8 +118,6 @@
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
-        margin-left: auto;
-        margin-right: 0;
     }
     .layout-sidebar-first .region-content .az-aspect-ratio.full-width-background .az-full-width-row,
     .layout-sidebar-second .region-content .az-aspect-ratio.full-width-background .az-full-width-row {

modules/custom/az_paragraphs/js/az_paragraphs_full_width.es6.js

@@ -63,7 +63,8 @@
       const distanceFromLeft = contentRegionPosition.left;
       const distanceFromRight = contentRegionPosition.right;
       const negativeLeftMargin = 0 - distanceFromLeft;
-      const negativeRightMargin = 0 - distanceFromRight;
+      const negativeRightMargin =
+        distanceFromRight - document.documentElement.clientWidth;
       document.documentElement.style.setProperty(
         '--full-width-left-distance',
         `${negativeLeftMargin}px`,
@@ -73,31 +74,37 @@
         `${negativeRightMargin}px`,
       );
     }
+    const contentTopAndBottomBlocks = document.querySelectorAll(
+      '.region-content-top > .block, .region-content-bottom > .block',
+    );
+    if (contentTopAndBottomBlocks.length > 0) {
+      const negativeAutoMargin =
+        -(
+          document.documentElement.clientWidth -
+          contentTopAndBottomBlocks[0].getBoundingClientRect().width
+        ) / 2;
+      document.documentElement.style.setProperty(
+        '--full-width-auto-distance',
+        `${negativeAutoMargin}px`,
+      );
+    }
   }
 
   /**
    * Executes functions to set up the page layout.
    */
-  function initialize() {
+  function setFullWidthLayout() {
     calculateScrollbarWidth();
     calculateFullWidthNegativeMargins();
     pushSidebarsDown();
   }
 
   // Initialize on page load
-  document.addEventListener('DOMContentLoaded', initialize);
+  document.addEventListener('DOMContentLoaded', setFullWidthLayout);
 
   // Recalculate values on window resize
-  window.addEventListener('resize', () => {
-    calculateScrollbarWidth();
-    calculateFullWidthNegativeMargins();
-    pushSidebarsDown();
-  });
+  window.addEventListener('resize', setFullWidthLayout);
 
   // Recalculate values when azVideoPlay custom event fires
-  window.addEventListener('azVideoPlay', () => {
-    calculateScrollbarWidth();
-    calculateFullWidthNegativeMargins();
-    pushSidebarsDown();
-  });
+  window.addEventListener('azVideoPlay', setFullWidthLayout);
 })();

modules/custom/az_paragraphs/js/az_paragraphs_full_width.js

@@ -35,25 +35,22 @@
       var distanceFromLeft = contentRegionPosition.left;
       var distanceFromRight = contentRegionPosition.right;
       var negativeLeftMargin = 0 - distanceFromLeft;
-      var negativeRightMargin = 0 - distanceFromRight;
+      var negativeRightMargin = distanceFromRight - document.documentElement.clientWidth;
       document.documentElement.style.setProperty('--full-width-left-distance', "".concat(negativeLeftMargin, "px"));
       document.documentElement.style.setProperty('--full-width-right-distance', "".concat(negativeRightMargin, "px"));
     }
+    var contentTopAndBottomBlocks = document.querySelectorAll('.region-content-top > .block, .region-content-bottom > .block');
+    if (contentTopAndBottomBlocks.length > 0) {
+      var negativeAutoMargin = -(document.documentElement.clientWidth - contentTopAndBottomBlocks[0].getBoundingClientRect().width) / 2;
+      document.documentElement.style.setProperty('--full-width-auto-distance', "".concat(negativeAutoMargin, "px"));
+    }
   }
-  function initialize() {
+  function setFullWidthLayout() {
     calculateScrollbarWidth();
     calculateFullWidthNegativeMargins();
     pushSidebarsDown();
   }
-  document.addEventListener('DOMContentLoaded', initialize);
-  window.addEventListener('resize', function () {
-    calculateScrollbarWidth();
-    calculateFullWidthNegativeMargins();
-    pushSidebarsDown();
-  });
-  window.addEventListener('azVideoPlay', function () {
-    calculateScrollbarWidth();
-    calculateFullWidthNegativeMargins();
-    pushSidebarsDown();
-  });
+  document.addEventListener('DOMContentLoaded', setFullWidthLayout);
+  window.addEventListener('resize', setFullWidthLayout);
+  window.addEventListener('azVideoPlay', setFullWidthLayout);
 })();

themes/custom/az_barrio/css/style.css

@@ -545,6 +545,25 @@ a.nolink + ul .sf-clone-parent {
   background: none 0 0 scroll no-repeat transparent;
 }
 
+/* Styling for full-width regions and paragraphs. */
+.full-width-background,
+.region-alert .paragraph,
+.region-content-featured .paragraph,
+.region-full-width-content-bottom .paragraph,
+.region-az-page-bottom .paragraph {
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+}
+.region .az-full-width-row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
 .region-sidebar-first .block,
 .region-sidebar-second .block {
   margin-bottom: 24px !important;