fix: tweak css

components/ContentType/LoyaltyPage.tsx

@@ -11,7 +11,7 @@ export default async function LoyaltyPage() {
   const hasSidebar = !!loyaltyPage.sidebar.length
   return (
     <section
-      className={`${styles.content} ${hasSidebar && styles.hasLeftSignbar}`}
+      className={`${styles.content} ${hasSidebar && styles.hasLeftSidebar}`}
     >
       {hasSidebar && <Sidebar blocks={loyaltyPage.sidebar} />}
 

components/ContentType/loyaltyPage.module.css

@@ -13,7 +13,7 @@
 }
 
 @media screen and (min-width: 950px) {
-  .withLeftSidebar {
+  .hasLeftSidebar {
     grid-template-columns: 30rem 1fr;
   }
 
@@ -29,6 +29,9 @@
     gap: 6.4rem;
     padding-left: 0;
     padding-right: 0;
+  }
+
+  .hasLeftSidebar .blocks {
     grid-column: 2 / -1;
   }
 }

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

@@ -1,14 +1,12 @@
 .container {
   background-color: var(--Main-Brand-PalePeach);
-  left: 50%;
   margin-top: calc(var(--Spacing-x2) * -1);
-  margin-left: -50vw;
-  margin-right: -50vw;
+  margin-left: calc(var(--Spacing-x2) * -1);
+  margin-right: calc(var(--Spacing-x2) * -1);
   margin-bottom: calc(
     (var(--Spacing-x2) + 7.7rem) * -1
   ); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
   position: relative;
-  right: 50%;
   width: 100dvw;
   padding: var(--Spacing-x2);
   display: grid;
@@ -39,7 +37,6 @@
 .mobileColumns {
   display: flex;
   flex-direction: column;
-  /* gap: var(--Spacing-x2); */
   display: none;
   margin: 0 calc(var(--Spacing-x2) * -1);
   position: relative;
@@ -121,7 +118,6 @@
   bottom: 0;
   left: 0;
   right: 50%;
-  margin-left: calc(var(--Spacing-x2) * -1);
   z-index: 1;
 }
 
@@ -134,23 +130,10 @@
   margin-bottom: calc(var(--Spacing-x2) * -1);
   left: 50%;
   right: 0;
-  margin-right: calc(var(--Spacing-x2) * -1);
   z-index: 1;
   border-top-left-radius: var(--Corner-radius-Medium);
 }
 
-.thirdColumn {
-  width: calc(100% / 3);
-  background-color: var(--Main-Brand-PalePeach);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc(100% / 3 * 2);
-  right: 0;
-  margin-left: calc(var(--Spacing-x2) * -1);
-  z-index: 1;
-}
-
 .levelSummary {
   display: flex;
   flex-direction: column;
@@ -256,15 +239,8 @@
 
 @media screen and (min-width: 950px) {
   .container {
-    left: auto;
-    right: auto;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-    width: auto;
+    margin: 0 calc(var(--Spacing-x3) * -1);
   }
-
   .mobileColumns {
     display: none;
   }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -1,6 +1,7 @@
 .container {
   display: grid;
   gap: 2.4rem;
+  /* These negative margins are needed for horizontally scrollable lists of cards */
   margin-right: -1.6rem;
   padding-right: 1.6rem;
 }
@@ -26,3 +27,10 @@
   margin: 0;
   grid-area: subtitle;
 }
+
+@media screen and (min-width: 950px) {
+  .container {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}