ISTWCMS-4970: additional css to align the sidebar correctly when used next to...

ISTWCMS-4970: additional css to align the sidebar correctly when used next to full screen widths as well as when it is collapsed in smaller views

source/_patterns/00-config/01-mixins/_mixins.uw.scss

@@ -58,14 +58,14 @@ $test-color-12: #f00;
   width: 100vw;
 }
 @mixin uw-full-width-reset {
-  left: 0;
+  left: inherit;
   margin-left: -1rem;
-  margin-right: -1rem;
-  max-width: 100%;
-  padding: 0;
+  margin-right: -2rem;
+  max-width: inherit;
+  padding:inherit;
   position: relative;
-  right:  0;
-  width: 100%;
+  right:  inherit;
+  width: inherit;
 }
 @mixin uw-contained-width-reset() {
   margin-left:inherit;

source/_patterns/03-layouts/node/_node.scss

@@ -6,9 +6,6 @@ $sidebar-gap: $grid-gap;
   }
   &__sidebar{
     display:none;
-    *{
-      // padding-right:0.25rem;
-    }
   }
   // Reset the grid to become flexed when we have sidebar.
   &.uw-node__with-sidebar{
@@ -25,25 +22,30 @@ $sidebar-gap: $grid-gap;
         margin:0 auto;
       }
       .uw-full-width{
-
         width:100vw;
 
       }
       @include medium {
         flex-direction: row;
         gap:$sidebar-gap;
+
         .layout{
+          padding-right:0;
           width: clamp(320px, 868px, calc(100vw - 347px));
         }
         .uw-contained-width{
+          padding-right:0;
           width: clamp(320px, 868px, calc(100vw - 347px));
         }
         /* Match the width of WCMS2's narrow: 496px */
         .uw-contained-width--narrow{
+          padding-right:0;
           width: clamp(320px, 496px, calc(100vw - 347px));
+
         }
         /* Match the width of WCMS2's wide: 753px */
         .uw-contained-width--wide{
+          padding-right:0;
           width: clamp(320px, 753px, calc(100vw -  347px));
         }
       }
@@ -51,36 +53,45 @@ $sidebar-gap: $grid-gap;
     .uw-node__sidebar{
       // Turn on sidebar with display.
       display:block;
+      padding:0 1rem;
       width:100%;
+
+      .layout{
+        padding:0;
+      }
       @include medium {
-        padding: 1rem 0;
+        padding:0;
         width: $sidebar-width;
         .layout{
           width:inherit;
         }
       }
-
     }
   }
 }
 // Class appears when full width content loads with sidebar on page
 .uw-section-has-full-width.uw-node__with-sidebar {
   .uw-node__grid {
+    background:$test-color-3;
+    justify-content: space-between;
     .uw-node__node{
+      background:$test-color-5;
       width:100%;
       @include medium {
+        background:$test-color-3;
+        padding-right:0;
         width: calc(100vw - 347px);
       }
-    }
+   }
     .uw-full-width{
+      background:$test-color-6;
       max-width:inherit;
       padding:0;
       width:100%;
     }
   }
   .uw-node__sidebar{
+    background:$test-color-8;
     padding: 0
   }
-
-
 }