fix: adjust viewport styles

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

@@ -86,23 +86,26 @@ function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
     const aBenefit = levelA.benefits[idx]
     const bBenefit = levelB.benefits[idx]
     return (
-      <BenefitCard
-        key={benefit.name}
-        title={benefit.name}
-        description={benefit.description}
-        comparedValues={{
-          a: {
-            unlocked: aBenefit.unlocked,
-            value: aBenefit.value,
-            valueDetails: aBenefit.valueDetails,
-          },
-          b: {
-            unlocked: bBenefit.unlocked,
-            value: bBenefit.value,
-            valueDetails: bBenefit.valueDetails,
-          },
-        }}
-      />
+      <div key={benefit.name} className={styles.benefitCardWrapper}>
+        <div className={styles.firstColumn} />
+        <div className={styles.secondColumn} />
+        <BenefitCard
+          title={benefit.name}
+          description={benefit.description}
+          comparedValues={{
+            a: {
+              unlocked: aBenefit.unlocked,
+              value: aBenefit.value,
+              valueDetails: aBenefit.valueDetails,
+            },
+            b: {
+              unlocked: bBenefit.unlocked,
+              value: bBenefit.value,
+              valueDetails: bBenefit.valueDetails,
+            },
+          }}
+        />
+      </div>
     )
   })
 }
@@ -110,6 +113,7 @@ function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
 export default function OverviewTable() {
   const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
   const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
+  const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
 
   function handleSelectChange(
     callback: Dispatch<SetStateAction<ComparisonLevel>>
@@ -141,8 +145,6 @@ export default function OverviewTable() {
           </p>
         </div>
         <div className={styles.mobileColumns}>
-          <div className={styles.firstColumn} />
-          <div className={styles.secondColumn} />
           <div className={styles.columnHeaderContainer}>
             <div className={styles.columnHeader}>
               <Select
@@ -162,7 +164,7 @@ export default function OverviewTable() {
             </div>
             <div className={styles.columnHeader}>
               <Select
-                name={"benefitA"}
+                name={"benefitB"}
                 label={"Level"}
                 items={levelOptions}
                 defaultSelectedKey={selectedLevelB.tier}
@@ -180,9 +182,6 @@ export default function OverviewTable() {
           {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
@@ -202,7 +201,7 @@ export default function OverviewTable() {
             </div>
             <div className={styles.columnHeader}>
               <Select
-                name={"benefitA"}
+                name={"benefitB"}
                 label={"Level"}
                 items={levelOptions}
                 defaultSelectedKey={selectedLevelB.tier}
@@ -221,8 +220,8 @@ export default function OverviewTable() {
                 name={"benefitC"}
                 label={"Level"}
                 items={levelOptions}
-                defaultSelectedKey={selectedLevelA.tier}
-                onSelect={handleSelectChange(setSelectedLevelA)}
+                defaultSelectedKey={selectedLevelC.tier}
+                onSelect={handleSelectChange(setSelectedLevelC)}
               />
               <LevelSummary
                 level={
@@ -233,6 +232,7 @@ export default function OverviewTable() {
               />
             </div>
           </div>
+          {createComparison(selectedLevelA, selectedLevelB, selectedLevelC)}
         </div>
       </div>
     </>

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

@@ -39,13 +39,21 @@
 .mobileColumns {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  /* gap: var(--Spacing-x2); */
+  display: none;
+  margin: 0 calc(var(--Spacing-x2) * -1);
+  position: relative;
+}
+
+.mobileColumns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   padding-top: var(--Spacing-x2);
   position: relative;
 }
 
 .columnHeaderContainer {
-  display: grid;
+  display: contents;
   grid-template-columns: 1fr 1fr;
   gap: var(--Spacing-x2);
   z-index: 2;
@@ -55,6 +63,27 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2);
+}
+
+.columnHeader:nth-child(1) {
+  padding-right: var(--Spacing-x1);
+}
+
+.columnHeader:nth-child(2) {
+  background-color: var(--Base-Background-Normal);
+  padding-left: var(--Spacing-x1);
+  border-top-left-radius: var(--Corner-radius-Medium);
+}
+
+.columnHeader:nth-child(2):has(+ .columnHeader) {
+  /* margin: 0; */
+  padding-left: var(--Spacing-x1);
+  padding-right: var(--Spacing-x1);
+}
+
+.columnHeader:nth-child(3) {
+  padding-left: var(--Spacing-x1);
 }
 
 .selectContainer {
@@ -143,6 +172,15 @@
   margin: 0;
 }
 
+.benefitCardWrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column: 1/3;
+  padding: var(--Spacing-x2);
+  padding-top: 0;
+}
+
 .benefitCard {
   background-color: var(--Main-Grey-White);
   border: 1px solid var(--Base-Border-Subtle);
@@ -150,6 +188,7 @@
   color: var(--Main-Brand-Burgundy);
   padding: 0 var(--Spacing-x2);
   z-index: 2;
+  grid-column: 1/3;
 }
 
 .details[open] .chevron {
@@ -233,6 +272,7 @@
   .firstColumn {
     width: calc((100%) / 3);
     right: calc(100% / 3 * 2);
+    margin-left: 0;
   }
 
   .secondColumn {
@@ -250,8 +290,17 @@
   .columnHeaderContainer {
     grid-template-columns: 1fr 1fr 1fr;
   }
+  .columnHeader:nth-child(2) {
+    border-top-right-radius: var(--Corner-radius-Medium);
+  }
 
   .columns {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin: 0 calc(var(--Spacing-x2) * -1);
+  }
+
+  .benefitCardWrapper {
+    grid-column: 1/4;
   }
 }