feat(SW-369): show sidebar on loyalty + loyalty & content page layout refactor

components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css

@@ -1,6 +1,5 @@
 .rewardCard {
   padding-bottom: var(--Spacing-x-one-and-half);
-  z-index: 2;
   grid-column: 1/3;
 }
 

components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -28,7 +28,6 @@
   display: contents;
   grid-template-columns: 1fr 1fr;
   gap: var(--Spacing-x2);
-  z-index: 2;
 }
 
 .columnHeader {

components/ContentType/ContentPage/contentPage.module.css

@@ -1,7 +1,5 @@
 .contentPage {
   padding-bottom: var(--Spacing-x9);
-  container-name: content-page;
-  container-type: inline-size;
 }
 
 .header {
@@ -35,12 +33,16 @@
 
 .contentContainer {
   display: grid;
-  padding: var(--Spacing-x4) var(--Spacing-x2) 0;
+  grid-template-areas:
+    "main"
+    "sidebar";
   gap: var(--Spacing-x4);
   align-items: start;
+  padding: var(--Spacing-x4) var(--Spacing-x2) 0;
 }
 
 .mainContent {
+  grid-area: main;
   display: grid;
   gap: var(--Spacing-x4);
   width: 100%;
@@ -57,6 +59,7 @@
     padding: var(--Spacing-x4) 0;
   }
   .contentContainer {
+    grid-template-areas: "main sidebar";
     grid-template-columns: var(--max-width-text-block) 1fr;
     gap: var(--Spacing-x9);
     max-width: var(--max-width-content);

components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -1,21 +1,24 @@
 .content {
   display: grid;
-  padding-bottom: var(--Spacing-x9);
-  padding-left: var(--Spacing-x0);
-  padding-right: var(--Spacing-x0);
-
-  container-name: loyalty-page;
-  container-type: inline-size;
+  grid-template-areas: "main";
+  grid-template-columns: 1fr;
+  gap: var(--Spacing-x5);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x9);
   max-width: var(--max-width);
   margin: 0 auto;
   width: 100%;
 }
 
+.content:has(> aside) {
+  grid-template-areas:
+    "main"
+    "sidebar";
+}
+
 .blocks {
+  grid-area: main;
   display: grid;
   gap: var(--Spacing-x7);
-  padding-left: var(--Spacing-x2);
-  padding-right: var(--Spacing-x2);
 }
 
 .header {
@@ -25,23 +28,16 @@
 
 @media screen and (min-width: 1367px) {
   .content {
-    gap: var(--Spacing-x5);
-    padding-left: var(--Spacing-x5);
-    padding-right: var(--Spacing-x5);
+    padding: 0 var(--Spacing-x5) var(--Spacing-x9);
   }
 
   .content:has(> aside) {
+    grid-template-areas: "sidebar main";
     grid-template-columns: 360px 1fr;
   }
 
-  .content:has(> aside) .blocks {
-    grid-column: 2 / -1;
-  }
-
   .blocks {
     gap: var(--Spacing-x9);
-    padding-left: var(--Spacing-x0);
-    padding-right: var(--Spacing-x0);
   }
 
   .blocks > section:first-of-type > header {

components/Sidebar/sidebar.module.css

@@ -1,5 +1,7 @@
 .aside {
+  grid-area: sidebar;
   display: grid;
+  gap: var(--Spacing-x4);
   container-name: sidebar;
   container-type: inline-size;
   gap: var(--Spacing-x3);
@@ -16,14 +18,7 @@
   .aside {
     align-content: flex-start;
     gap: var(--Spacing-x4);
-
     border-top: 0;
     padding-top: 0;
   }
 }
-
-@container loyalty-page (max-width: 1366px) {
-  .aside {
-    display: none;
-  }
-}