Update simplified pricing express variant styles to ensure full height and flex display, and adjust alignment for improved layout consistency.

Author: Axelcureno

libs/deps/mas/merch-card.js

@@ -1772,14 +1772,16 @@ merch-card[variant="simplified-pricing-express"] {
     min-width: var(--consonant-merch-card-simplified-pricing-express-width);
     background-color: var(--spectrum-gray-50);
     border-radius: 16px;
+    height: 100%;
+    display: flex;
 }
 
 /* Grid layout for simplified-pricing-express cards */
 .section .content:has(merch-card[variant="simplified-pricing-express"]) {
     display: grid;
     justify-content: center;
     justify-items: center;
-    align-items: normal;
+    align-items: stretch;
     gap: var(--consonant-merch-spacing-m);
     padding: var(--spacing-m);
 }
@@ -1900,6 +1902,7 @@ merch-card[variant="simplified-pricing-express"] [slot="footer"] sp-button[varia
             width: var(--merch-card-simplified-pricing-express-width);
             max-width: var(--merch-card-simplified-pricing-express-width);
             min-height: var(--merch-card-simplified-pricing-express-min-height);
+            height: 100%;
             background: var(--spectrum-gray-50);
             border: 2px solid var(--merch-card-custom-border-color, transparent);
             border-radius: 16px;

libs/features/mas/dist/mas.js

@@ -1782,14 +1782,16 @@ merch-card[variant="simplified-pricing-express"] {
     min-width: var(--consonant-merch-card-simplified-pricing-express-width);
     background-color: var(--spectrum-gray-50);
     border-radius: 16px;
+    height: 100%;
+    display: flex;
 }
 
 /* Grid layout for simplified-pricing-express cards */
 .section .content:has(merch-card[variant="simplified-pricing-express"]) {
     display: grid;
     justify-content: center;
     justify-items: center;
-    align-items: normal;
+    align-items: stretch;
     gap: var(--consonant-merch-spacing-m);
     padding: var(--spacing-m);
 }
@@ -1910,6 +1912,7 @@ merch-card[variant="simplified-pricing-express"] [slot="footer"] sp-button[varia
             width: var(--merch-card-simplified-pricing-express-width);
             max-width: var(--merch-card-simplified-pricing-express-width);
             min-height: var(--merch-card-simplified-pricing-express-min-height);
+            height: 100%;
             background: var(--spectrum-gray-50);
             border: 2px solid var(--merch-card-custom-border-color, transparent);
             border-radius: 16px;

libs/features/mas/src/variants/simplified-pricing-express.css.js

@@ -13,14 +13,16 @@ merch-card[variant="simplified-pricing-express"] {
     min-width: var(--consonant-merch-card-simplified-pricing-express-width);
     background-color: var(--spectrum-gray-50);
     border-radius: 16px;
+    height: 100%;
+    display: flex;
 }
 
 /* Grid layout for simplified-pricing-express cards */
 .section .content:has(merch-card[variant="simplified-pricing-express"]) {
     display: grid;
     justify-content: center;
     justify-items: center;
-    align-items: normal;
+    align-items: stretch;
     gap: var(--consonant-merch-spacing-m);
     padding: var(--spacing-m);
 }

libs/features/mas/src/variants/simplified-pricing-express.js

@@ -89,6 +89,7 @@ export class SimplifiedPricingExpress extends VariantLayout {
             width: var(--merch-card-simplified-pricing-express-width);
             max-width: var(--merch-card-simplified-pricing-express-width);
             min-height: var(--merch-card-simplified-pricing-express-min-height);
+            height: 100%;
             background: var(--spectrum-gray-50);
             border: 2px solid var(--merch-card-custom-border-color, transparent);
             border-radius: 16px;