Merge pull request #21766 from overleaf/mf-checkout-main-layout-flexbox

[web] Use flex for layout of the new payment page to match figma width on the left card

GitOrigin-RevId: ca2b104ee50b7df0f352c3baaa610514e0432ffd

services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss

@@ -141,50 +141,52 @@
 
 .payment-container {
   padding-top: var(--spacing-13);
+  display: flex;
+  gap: var(--spacing-10);
+  justify-content: center;
 
-  .payment-row {
-    display: flex;
-    gap: var(--spacing-10);
-    justify-content: center;
+  @include media-breakpoint-down(lg) {
+    flex-direction: column;
+    align-items: center;
+  }
 
-    .payment-review-panel {
-      h4 {
-        color: var(--neutral-70);
-        font-weight: 600;
+  .payment-review-panel {
+    width: 339px;
 
-        @include heading-sm;
-      }
+    @include media-breakpoint-down(lg) {
+      width: 100%;
+    }
 
-      .price-feature-description {
-        color: var(--neutral-70);
-        font-weight: 400;
+    h4 {
+      color: var(--neutral-70);
+      font-weight: 600;
 
-        @include body-base;
+      @include heading-sm;
+    }
 
-        h4 {
-          margin-bottom: var(--spacing-06);
-        }
+    .price-feature-description {
+      color: var(--neutral-70);
+      font-weight: 400;
 
-        .features-list {
-          margin-top: var(--spacing-08);
-        }
+      @include body-base;
+
+      h4 {
+        margin-bottom: var(--spacing-06);
       }
 
-      hr {
+      .features-list {
         margin-top: var(--spacing-08);
-        margin-bottom: var(--spacing-08);
       }
     }
 
-    .payment-right-section {
-      padding: var(--spacing-08);
+    hr {
+      margin-top: var(--spacing-08);
+      margin-bottom: var(--spacing-08);
     }
   }
 
-  @include media-breakpoint-up(md) {
-    .payment-review-panel {
-      padding: 0;
-    }
+  .payment-right-section {
+    padding: var(--spacing-08);
   }
 }