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,32 +10,19 @@
       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));
+    max-width: calc(100vw);
 }
 .region-content .full-width-background {
     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 .az-full-width-column-content {
     -ms-flex-preferred-size: 0;
     flex-basis: 0;
@@ -126,8 +113,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

@@ -6,12 +6,17 @@
   /**
    * Calculates scroll bar width if any and assigns the value to the
    * `--scrollbar-width` CSS variable on the html element.
+   *
+   * @return {number} scrollbarWidth The width of the scrollbar, in pixels.
    */
   function calculateScrollbarWidth() {
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
     document.documentElement.style.setProperty(
       '--scrollbar-width',
-      `${window.innerWidth - document.documentElement.clientWidth}px`,
+      `${scrollbarWidth}px`,
     );
+    return scrollbarWidth;
   }
 
   /**
@@ -55,15 +60,17 @@
    *
    * This function assigns values to the `--full-width-left-distance` and
    * `--full-width-right-distance` CSS variables on the `html` element.
+   *
+   * @param {number} scrollbarWidth The width of the scrollbar, in pixels.
    */
-  function calculateFullWidthNegativeMargins() {
+  function calculateFullWidthNegativeMargins(scrollbarWidth) {
     const contentRegion = document.querySelectorAll('.block-system-main-block');
     if (contentRegion.length > 0) {
       const contentRegionPosition = contentRegion[0].getBoundingClientRect();
       const distanceFromLeft = contentRegionPosition.left;
       const distanceFromRight = contentRegionPosition.right;
-      const negativeLeftMargin = 0 - distanceFromLeft;
-      const negativeRightMargin = 0 - distanceFromRight;
+      const negativeLeftMargin = 0 - distanceFromLeft - scrollbarWidth / 2;
+      const negativeRightMargin = 0 - distanceFromRight - scrollbarWidth / 2;
       document.documentElement.style.setProperty(
         '--full-width-left-distance',
         `${negativeLeftMargin}px`,
@@ -78,26 +85,18 @@
   /**
    * Executes functions to set up the page layout.
    */
-  function initialize() {
-    calculateScrollbarWidth();
-    calculateFullWidthNegativeMargins();
+  function setFullWidthLayout() {
+    const scrollbarWidth = calculateScrollbarWidth();
+    calculateFullWidthNegativeMargins(scrollbarWidth);
     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

@@ -6,7 +6,9 @@
 **/
 (function () {
   function calculateScrollbarWidth() {
-    document.documentElement.style.setProperty('--scrollbar-width', "".concat(window.innerWidth - document.documentElement.clientWidth, "px"));
+    var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.documentElement.style.setProperty('--scrollbar-width', "".concat(scrollbarWidth, "px"));
+    return scrollbarWidth;
   }
   function pushSidebarsDown() {
     var contentRegion = document.querySelector('main.main-content');
@@ -28,32 +30,24 @@
       }
     }
   }
-  function calculateFullWidthNegativeMargins() {
+  function calculateFullWidthNegativeMargins(scrollbarWidth) {
     var contentRegion = document.querySelectorAll('.block-system-main-block');
     if (contentRegion.length > 0) {
       var contentRegionPosition = contentRegion[0].getBoundingClientRect();
       var distanceFromLeft = contentRegionPosition.left;
       var distanceFromRight = contentRegionPosition.right;
-      var negativeLeftMargin = 0 - distanceFromLeft;
-      var negativeRightMargin = 0 - distanceFromRight;
+      var negativeLeftMargin = 0 - distanceFromLeft - scrollbarWidth / 2;
+      var negativeRightMargin = 0 - distanceFromRight - scrollbarWidth / 2;
       document.documentElement.style.setProperty('--full-width-left-distance', "".concat(negativeLeftMargin, "px"));
       document.documentElement.style.setProperty('--full-width-right-distance', "".concat(negativeRightMargin, "px"));
     }
   }
-  function initialize() {
-    calculateScrollbarWidth();
-    calculateFullWidthNegativeMargins();
+  function setFullWidthLayout() {
+    var scrollbarWidth = calculateScrollbarWidth();
+    calculateFullWidthNegativeMargins(scrollbarWidth);
     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: calc(100vw);
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+}
+.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;