feat: add markup for additional viewport sizes

components/ContentType/LoyaltyPage.tsx

@@ -8,10 +8,12 @@ import styles from "./loyaltyPage.module.css"
 
 export default async function LoyaltyPage() {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
-
+  const hasSidebar = !!loyaltyPage.sidebar.length
   return (
-    <section className={styles.content}>
-      {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
+    <section
+      className={`${styles.content} ${hasSidebar && styles.hasLeftSignbar}`}
+    >
+      {hasSidebar && <Sidebar blocks={loyaltyPage.sidebar} />}
 
       <MaxWidth className={styles.blocks} tag="main">
         {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}

components/ContentType/loyaltyPage.module.css

@@ -13,9 +13,12 @@
 }
 
 @media screen and (min-width: 950px) {
+  .withLeftSidebar {
+    grid-template-columns: 30rem 1fr;
+  }
+
   .content {
     gap: 2.7rem;
-    grid-template-columns: 30rem 1fr;
     padding-bottom: 17.5rem;
     padding-left: 2.4rem;
     padding-right: 2.4rem;

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -128,57 +128,114 @@ export default function OverviewTable() {
   }))
 
   return (
-    <div className={styles.container}>
-      <div className={styles.intro}>
-        <OverviewTableTitle texts={titleTranslations[Lang.en]} />
-        <p className={styles.preamble}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus
-          quis varius quam quisque id diam vel. Rhoncus urna neque viverra
-          justo. Mattis aliquam faucibus purus in massa. Id cursus metus aliquam
-          eleifend mi in nulla posuere.
-        </p>
-      </div>
-      <div className={styles.columns}>
-        <div className={styles.leftColumn} />
-        <div className={styles.rightColumn} />
-        <div className={styles.columnHeaderContainer}>
-          <div className={styles.columnHeader}>
-            <Select
-              name={"benefitA"}
-              label={"Level"}
-              items={levelOptions}
-              defaultSelectedKey={selectedLevelA.tier}
-              onSelect={handleSelectChange(setSelectedLevelA)}
-            />
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) => level.tier === selectedLevelA.tier
-                ) as ComparisonLevel
-              }
-            />
+    <>
+      <div className={styles.container}>
+        <div className={styles.intro}>
+          <OverviewTableTitle texts={titleTranslations[Lang.en]} />
+          <p className={styles.preamble}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu
+            risus quis varius quam quisque id diam vel. Rhoncus urna neque
+            viverra justo. Mattis aliquam faucibus purus in massa. Id cursus
+            metus aliquam eleifend mi in nulla posuere.
+          </p>
+        </div>
+        <div className={styles.mobileColumns}>
+          <div className={styles.firstColumn} />
+          <div className={styles.secondColumn} />
+          <div className={styles.columnHeaderContainer}>
+            <div className={styles.columnHeader}>
+              <Select
+                name={"benefitA"}
+                label={"Level"}
+                items={levelOptions}
+                defaultSelectedKey={selectedLevelA.tier}
+                onSelect={handleSelectChange(setSelectedLevelA)}
+              />
+              <LevelSummary
+                level={
+                  levelsData.levels.find(
+                    (level) => level.tier === selectedLevelA.tier
+                  ) as ComparisonLevel
+                }
+              />
+            </div>
+            <div className={styles.columnHeader}>
+              <Select
+                name={"benefitA"}
+                label={"Level"}
+                items={levelOptions}
+                defaultSelectedKey={selectedLevelB.tier}
+                onSelect={handleSelectChange(setSelectedLevelB)}
+              />
+              <LevelSummary
+                level={
+                  levelsData.levels.find(
+                    (level) => level.tier === selectedLevelB.tier
+                  ) as ComparisonLevel
+                }
+              />
+            </div>
           </div>
-          <div className={styles.columnHeader}>
-            <Select
-              name={"benefitA"}
-              label={"Level"}
-              items={levelOptions}
-              defaultSelectedKey={selectedLevelB.tier}
-              onSelect={handleSelectChange(setSelectedLevelB)}
-            />
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) => level.tier === selectedLevelB.tier
-                ) as ComparisonLevel
-              }
-            />
+          {createComparison(selectedLevelA, selectedLevelB)}
+        </div>
+        <div className={styles.columns}>
+          <div className={styles.firstColumn} />
+          <div className={styles.secondColumn} />
+          <div className={styles.thirdColumn} />
+          <div className={styles.columnHeaderContainer}>
+            <div className={styles.columnHeader}>
+              <Select
+                name={"benefitA"}
+                label={"Level"}
+                items={levelOptions}
+                defaultSelectedKey={selectedLevelA.tier}
+                onSelect={handleSelectChange(setSelectedLevelA)}
+              />
+              <LevelSummary
+                level={
+                  levelsData.levels.find(
+                    (level) => level.tier === selectedLevelA.tier
+                  ) as ComparisonLevel
+                }
+              />
+            </div>
+            <div className={styles.columnHeader}>
+              <Select
+                name={"benefitA"}
+                label={"Level"}
+                items={levelOptions}
+                defaultSelectedKey={selectedLevelB.tier}
+                onSelect={handleSelectChange(setSelectedLevelB)}
+              />
+              <LevelSummary
+                level={
+                  levelsData.levels.find(
+                    (level) => level.tier === selectedLevelB.tier
+                  ) as ComparisonLevel
+                }
+              />
+            </div>
+            <div className={styles.columnHeader}>
+              <Select
+                name={"benefitC"}
+                label={"Level"}
+                items={levelOptions}
+                defaultSelectedKey={selectedLevelA.tier}
+                onSelect={handleSelectChange(setSelectedLevelA)}
+              />
+              <LevelSummary
+                level={
+                  levelsData.levels.find(
+                    (level) => level.tier === selectedLevelA.tier
+                  ) as ComparisonLevel
+                }
+              />
+            </div>
           </div>
         </div>
-        {createComparison(selectedLevelA, selectedLevelB)}
       </div>
-    </div>
+    </>
   )
 }
 

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

@@ -32,6 +32,11 @@
 }
 
 .columns {
+  display: none;
+  position: relative;
+}
+
+.mobileColumns {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
@@ -80,7 +85,7 @@
   bottom: var(--Spacing-x2);
 }
 
-.leftColumn {
+.firstColumn {
   background-color: var(--Main-Brand-PalePeach);
   position: absolute;
   top: 0;
@@ -91,7 +96,7 @@
   z-index: 1;
 }
 
-.rightColumn {
+.secondColumn {
   background-color: var(--Base-Background-Normal);
   position: absolute;
   position: absolute;
@@ -105,6 +110,18 @@
   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;
@@ -197,3 +214,44 @@
   font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }
+
+@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;
+  }
+
+  .mobileColumns {
+    display: none;
+  }
+
+  .firstColumn {
+    width: calc((100%) / 3);
+    right: calc(100% / 3 * 2);
+  }
+
+  .secondColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3);
+    right: calc(100% / 3);
+  }
+
+  .thirdColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3 * 2);
+    right: 0;
+  }
+
+  .columnHeaderContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .columns {
+    display: flex;
+  }
+}