From 4b43dbffc574a56a7fbb4ce4cadb36af30cde43f Mon Sep 17 00:00:00 2001
From: Lisa Chan <lchan@mozilla.com>
Date: Mon, 21 Nov 2022 19:26:02 -0500
Subject: [PATCH 1/2] refactor(payments-server): Convert responsive design in
 Checkout component to use Tailwind

---
 .../src/components/NewUserEmailForm/index.tsx |  4 +-
 .../components/PaymentConfirmation/index.tsx  |  2 +-
 .../src/components/PaymentErrorView/index.tsx |  2 +-
 .../components/PaymentProcessing/index.tsx    |  2 +-
 .../PaymentProviderDetails/index.scss         |  1 +
 .../components/SubscriptionTitle/index.tsx    |  2 +-
 .../src/routes/Checkout/index.scss            | 41 ---------------
 .../src/routes/Checkout/index.tsx             | 51 +++++++++----------
 .../Product/SubscriptionCreate/index.scss     |  2 +-
 .../PlanUpgradeDetails.tsx                    |  2 +-
 .../SubscriptionUpgrade/index.stories.tsx     | 16 +++++-
 .../src/styles/tailwind.css                   | 11 ++--
 12 files changed, 56 insertions(+), 80 deletions(-)
 delete mode 100644 packages/fxa-payments-server/src/routes/Checkout/index.scss

diff --git a/packages/fxa-payments-server/src/components/NewUserEmailForm/index.tsx b/packages/fxa-payments-server/src/components/NewUserEmailForm/index.tsx
index 0af73b77b8..0c3751604f 100644
--- a/packages/fxa-payments-server/src/components/NewUserEmailForm/index.tsx
+++ b/packages/fxa-payments-server/src/components/NewUserEmailForm/index.tsx
@@ -110,7 +110,9 @@ export const NewUserEmailForm = ({
           </a>
         </p>
       </Localized>
-      <hr />
+
+      <hr className="mx-auto w-full" />
+
       <Localized id="new-user-email" attrs={{ label: true }}>
         <Input
           type="text"
diff --git a/packages/fxa-payments-server/src/components/PaymentConfirmation/index.tsx b/packages/fxa-payments-server/src/components/PaymentConfirmation/index.tsx
index 1299d5e183..b4978c609a 100644
--- a/packages/fxa-payments-server/src/components/PaymentConfirmation/index.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentConfirmation/index.tsx
@@ -79,7 +79,7 @@ export const PaymentConfirmation = ({
     <>
       <SubscriptionTitle screenType="success" />
       <section
-        className="mb-auto mx-4 tablet:m-0 payment-confirmation"
+        className="mb-auto tablet:m-0 payment-confirmation"
         data-testid="payment-confirmation"
       >
         <header className="flex flex-col justify-center items-center row-divider-grey-200 text-center pb-8 mt-5 desktop:mt-2">
diff --git a/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
index ebeb146fd7..7cbd5c1263 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
@@ -153,7 +153,7 @@ export const PaymentErrorView = ({
     <>
       {title}
       <section
-        className={`payment-error row-start-3 row-end-4 mx-4 tablet:mt-0 ${className}`}
+        className={`payment-error row-start-3 row-end-4 tablet:mt-0 ${className}`}
         data-testid="payment-error"
       >
         <div className="wrapper mb-12">
diff --git a/packages/fxa-payments-server/src/components/PaymentProcessing/index.tsx b/packages/fxa-payments-server/src/components/PaymentProcessing/index.tsx
index 35ccdf100b..9156aed5ec 100644
--- a/packages/fxa-payments-server/src/components/PaymentProcessing/index.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentProcessing/index.tsx
@@ -21,7 +21,7 @@ export const PaymentProcessing = ({
     <>
       <SubscriptionTitle screenType="processing" className={className} />
       <section
-        className={`payment-processing flex flex-col mx-4 ${className}`}
+        className={`payment-processing flex flex-col ${className}`}
         data-testid="payment-processing"
       >
         <div className="flex flex-col text-center">
diff --git a/packages/fxa-payments-server/src/components/PaymentProviderDetails/index.scss b/packages/fxa-payments-server/src/components/PaymentProviderDetails/index.scss
index 1ab3c090dc..fc6c4bf1a3 100644
--- a/packages/fxa-payments-server/src/components/PaymentProviderDetails/index.scss
+++ b/packages/fxa-payments-server/src/components/PaymentProviderDetails/index.scss
@@ -27,6 +27,7 @@
   color: rgba(0, 0, 0, 0);
   width: 90px;
   height: 24px;
+  margin: 16px 0;
   position: relative;
 }
 
diff --git a/packages/fxa-payments-server/src/components/SubscriptionTitle/index.tsx b/packages/fxa-payments-server/src/components/SubscriptionTitle/index.tsx
index 7a99f951a6..acc03e771f 100644
--- a/packages/fxa-payments-server/src/components/SubscriptionTitle/index.tsx
+++ b/packages/fxa-payments-server/src/components/SubscriptionTitle/index.tsx
@@ -35,7 +35,7 @@ export const SubscriptionTitle = ({
 
   return (
     <div
-      className={`subscription-title bg-white shadow-sm shadow-grey-300 text-center mt-0 mx-4 mb-auto pt-5 px-4 pb-px border-y-auto row-start-1 row-end-2 tablet:mx-0 ${className}`}
+      className={`subscription-title bg-white shadow-sm shadow-grey-300 text-center mt-0 mb-auto pt-5 px-4 pb-px border-y-auto tablet:mx-0 ${className}`}
       data-testid={`subscription-${screenType}-title`}
     >
       <Localized id={`subscription-${screenType}-title`}>
diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.scss b/packages/fxa-payments-server/src/routes/Checkout/index.scss
deleted file mode 100644
index d0119b90f3..0000000000
--- a/packages/fxa-payments-server/src/routes/Checkout/index.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../../../fxa-content-server/app/styles/variables';
-@import '../../../../fxa-content-server/app/styles/breakpoints';
-
-.checkout-payment {
-  @include max-width('tablet') {
-    grid-row: 4/5;
-    border-radius: 8px;
-    margin: 24px 16px;
-    min-height: 100%;
-  }
-
-  @media (orientation: landscape) and (max-width: 927px) and (max-height: 429px) {
-    grid-row: 4/5;
-    border-radius: 8px;
-    margin: 24px 16px;
-    min-height: 100%;
-  }
-
-  @media (orientation: portrait) and (max-width: 429px) and (max-height: 927px) {
-    grid-row: 4/5;
-    border-radius: 8px;
-    margin: 24px 16px;
-    min-height: 100%;
-  }
-
-  @include min-width('desktop') {
-    padding: 16px 48px 48px;
-  }
-}
-
-.pay-with-heading {
-  &:before,
-  &:after {
-    content: '';
-    border-top: 1px solid #e0e0e6;
-  }
-
-  @include max-width('tablet') {
-    margin-top: 16px;
-  }
-}
diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.tsx b/packages/fxa-payments-server/src/routes/Checkout/index.tsx
index 6b293097c1..a7f81a41e9 100644
--- a/packages/fxa-payments-server/src/routes/Checkout/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Checkout/index.tsx
@@ -34,7 +34,6 @@ import { Customer, Profile } from '../../store/types';
 
 import AcceptedCards from '../Product/AcceptedCards';
 
-import './index.scss';
 import PaymentForm, {
   StripePaymentSubmitResult,
   StripePaymentUpdateResult,
@@ -344,9 +343,32 @@ export const Checkout = ({
           })}
         />
 
+        {transactionInProgress && isMobile ? null : (
+          <div className="payment-panel">
+            <PlanDetails
+              {...{
+                selectedPlan,
+                isMobile,
+                showExpandButton: isMobile,
+                coupon,
+              }}
+            />
+
+            <CouponForm
+              {...{
+                planId: selectedPlan.plan_id,
+                readOnly: false,
+                subscriptionInProgress: inProgress || transactionInProgress,
+                coupon,
+                setCoupon,
+              }}
+            />
+          </div>
+        )}
+
         <div
           className={classNames(
-            'checkout-payment component-card border-t-0 pt-4 px-4 pb-14 row-start-2 row-end-3 rounded-t-none text-grey-600',
+            'component-card border-t-0 min-h-full mb-6 pt-4 px-4 pb-14 rounded-t-lg text-grey-600 tablet:min-h-0 tablet:rounded-t-none desktop:pt-4 desktop:px-12 desktop:pb-12',
             {
               hidden: transactionInProgress || subscriptionError,
             }
@@ -371,7 +393,7 @@ export const Checkout = ({
             }
           />
 
-          <hr />
+          <hr className="mx-auto w-full" />
 
           <PaymentMethodHeader
             plan={selectedPlan}
@@ -470,29 +492,6 @@ export const Checkout = ({
             />
           </div>
         </div>
-
-        {transactionInProgress && isMobile ? null : (
-          <div className="payment-panel">
-            <PlanDetails
-              {...{
-                selectedPlan,
-                isMobile,
-                showExpandButton: isMobile,
-                coupon,
-              }}
-            />
-
-            <CouponForm
-              {...{
-                planId: selectedPlan.plan_id,
-                readOnly: false,
-                subscriptionInProgress: inProgress || transactionInProgress,
-                coupon,
-                setCoupon,
-              }}
-            />
-          </div>
-        )}
       </div>
     </>
   );
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
index 5b88e7f5d3..c91efd8cf2 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
@@ -20,7 +20,7 @@
   box-shadow: 0px 1px 4px 0px rgb(158, 158, 158);
   color: rgba(12, 12, 13, 0.8);
   grid-row: 4/5;
-  margin: 24px 16px;
+  margin-bottom: 24px;
   min-height: 100%;
   padding: 16px 16px 60px;
 
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
index 8ee7f32002..c265ed9b21 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
@@ -34,7 +34,7 @@ export const PlanUpgradeDetails = ({
 
   return (
     <section
-      className={`plan-upgrade-details-component mt-6 mx-4 ${className}`}
+      className={`plan-upgrade-details-component mt-6 tablet:max-w-xs ${className}`}
       {...{ role }}
       data-testid="plan-upgrade-details-component"
     >
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.stories.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.stories.tsx
index c9c7b373b9..8edfae14c7 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.stories.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.stories.tsx
@@ -10,6 +10,7 @@ import { SignInLayout } from '../../../components/AppLayout';
 
 import {
   CUSTOMER,
+  PAYPAL_CUSTOMER,
   SELECTED_PLAN,
   UPGRADE_FROM_PLAN,
   PROFILE,
@@ -20,7 +21,7 @@ import { WebSubscription } from 'fxa-shared/subscriptions/types';
 
 function init() {
   storiesOf('routes/Product/SubscriptionUpgrade', module)
-    .add('upgrade offer', () => (
+    .add('upgrade offer - Visa', () => (
       <SubscriptionUpgradeView
         props={{
           ...MOCK_PROPS,
@@ -28,6 +29,14 @@ function init() {
         }}
       />
     ))
+    .add('upgrade offer - PayPal', () => (
+      <SubscriptionUpgradeView
+        props={{
+          ...MOCK_PROPS_PAYPAL,
+          updateSubscriptionPlanAndRefresh: () => linkToUpgradeSuccess(),
+        }}
+      />
+    ))
     .add('upgrade offer localized to xx-pirate', () => (
       <SubscriptionUpgradeView
         appContextValue={{
@@ -111,4 +120,9 @@ const MOCK_PROPS: SubscriptionUpgradeProps = {
   resetUpdateSubscriptionPlan: action('resetUpdateSubscriptionPlan'),
 };
 
+const MOCK_PROPS_PAYPAL: SubscriptionUpgradeProps = {
+  ...MOCK_PROPS,
+  customer: PAYPAL_CUSTOMER,
+};
+
 init();
diff --git a/packages/fxa-payments-server/src/styles/tailwind.css b/packages/fxa-payments-server/src/styles/tailwind.css
index 05f237683c..f47d936707 100644
--- a/packages/fxa-payments-server/src/styles/tailwind.css
+++ b/packages/fxa-payments-server/src/styles/tailwind.css
@@ -26,7 +26,7 @@
 }
 
 .payment-panel {
-  @apply mx-4 tablet:mt-6 tablet:max-w-xs tablet:col-span-2 tablet:row-start-1 tablet:row-end-4;
+  @apply mb-6 tablet:mt-6 tablet:max-w-xs tablet:col-start-2 tablet:col-end-auto tablet:row-start-1 tablet:row-end-3;
 }
 
 /* footer copy */
@@ -52,7 +52,9 @@
 
 /* shared styles used in Checkout and SubscriptionCreate*/
 .pay-with-heading {
-  @apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mt-0 mx-0 mb-6 text-center text-grey-400 w-full;
+  @apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mx-0 mb-6 text-center text-grey-400 w-full;
+  @apply before:content-[''] before:border-b before:border-0 before:border-solid before:border-grey-200;
+  @apply after:content-[''] after:border-b after:border-0 after:border-solid after:border-grey-200;
 }
 
 .step-header {
@@ -126,9 +128,8 @@
 }
 
 .main-content {
-  @apply grid grid-cols-[calc(100vw_-_1.5rem)] grid-rows-[min-content] gap-x-4 mt-16 min-h-[calc(100vh_-_4rem)];
-  @apply tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:gap-x-8 tablet:mt-[80px] tablet:mb-auto tablet:mx-3;
-  @apply desktop:grid-cols-[600px_1fr];
+  @apply grid mt-16 mx-6;
+  @apply tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:gap-x-12 tablet:mt-[80px] tablet:mb-auto tablet:mx-3;
 }
 
 .payment-button {

From 8d1a70ee3a43a86f6390582633125701681df9bb Mon Sep 17 00:00:00 2001
From: Lisa Chan <lchan@mozilla.com>
Date: Tue, 22 Nov 2022 14:54:49 -0500
Subject: [PATCH 2/2] Updates - includes feedback from Reino, Peter and fixes
 other pages

---
 .../src/components/PaymentErrorView/index.tsx |  2 +-
 .../src/routes/Checkout/index.tsx             |  2 +-
 .../Product/SubscriptionCreate/index.scss     |  6 +-
 .../Product/SubscriptionCreate/index.tsx      | 56 ++++++++++---------
 .../PlanUpgradeDetails.tsx                    |  2 +-
 .../Product/SubscriptionUpgrade/index.tsx     | 23 ++++----
 .../src/styles/tailwind.css                   |  9 +--
 7 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
index 7cbd5c1263..2e43ed6f7f 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
@@ -153,7 +153,7 @@ export const PaymentErrorView = ({
     <>
       {title}
       <section
-        className={`payment-error row-start-3 row-end-4 tablet:mt-0 ${className}`}
+        className={`payment-error tablet:mt-0 ${className}`}
         data-testid="payment-error"
       >
         <div className="wrapper mb-12">
diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.tsx b/packages/fxa-payments-server/src/routes/Checkout/index.tsx
index a7f81a41e9..d912aafa8c 100644
--- a/packages/fxa-payments-server/src/routes/Checkout/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Checkout/index.tsx
@@ -368,7 +368,7 @@ export const Checkout = ({
 
         <div
           className={classNames(
-            'component-card border-t-0 min-h-full mb-6 pt-4 px-4 pb-14 rounded-t-lg text-grey-600 tablet:min-h-0 tablet:rounded-t-none desktop:pt-4 desktop:px-12 desktop:pb-12',
+            'component-card border-t-0 min-h-full mb-6 pt-4 px-4 pb-14 rounded-t-lg text-grey-600 tablet:rounded-t-none desktop:px-12 desktop:pb-12',
             {
               hidden: transactionInProgress || subscriptionError,
             }
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
index c91efd8cf2..746f410d96 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
@@ -3,8 +3,6 @@
 @import '../../../styles/variables';
 
 .subscription-title + .product-payment {
-  grid-row: 4/5;
-
   @include min-width('tablet') {
     border-top: 0;
     border-radius: 0 0 8px 8px;
@@ -16,18 +14,16 @@
 
 .product-payment {
   background: $color-white;
-  border-radius: 8px;
   box-shadow: 0px 1px 4px 0px rgb(158, 158, 158);
   color: rgba(12, 12, 13, 0.8);
-  grid-row: 4/5;
   margin-bottom: 24px;
   min-height: 100%;
   padding: 16px 16px 60px;
 
   @include min-width('tablet'){
-    grid-row: 1/3;
     margin: 0 0 32px;
     min-height: auto;
+    box-shadow: 0 -1px #fff,0 1px #fff,-2px 2px 2px -2px #9e9e9e,2px 2px 2px -2px #9e9e9e;
   }
 
   @include min-width('desktop') {
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx
index 4e572217d6..d86f114354 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx
@@ -230,10 +230,37 @@ export const SubscriptionCreate = ({
             hidden: transactionInProgress || subscriptionError,
           })}
         />
+
+        {transactionInProgress && isMobile ? null : (
+          <div className="payment-panel">
+            <PlanDetails
+              {...{
+                selectedPlan,
+                isMobile,
+                showExpandButton: isMobile,
+                coupon: coupon,
+              }}
+            />
+
+            <CouponForm
+              {...{
+                planId: selectedPlan.plan_id,
+                readOnly: false,
+                subscriptionInProgress: inProgress || transactionInProgress,
+                coupon,
+                setCoupon,
+              }}
+            />
+          </div>
+        )}
+
         <div
-          className={classNames('product-payment', {
-            hidden: transactionInProgress || subscriptionError,
-          })}
+          className={classNames(
+            'product-payment rounded-lg tablet:rounded-t-none',
+            {
+              hidden: transactionInProgress || subscriptionError,
+            }
+          )}
           data-testid="subscription-create"
         >
           <PaymentMethodHeader
@@ -324,29 +351,6 @@ export const SubscriptionCreate = ({
             {selectedPlan && <TermsAndPrivacy plan={selectedPlan} />}
           </div>
         </div>
-
-        {transactionInProgress && isMobile ? null : (
-          <div className="payment-panel">
-            <PlanDetails
-              {...{
-                selectedPlan,
-                isMobile,
-                showExpandButton: isMobile,
-                coupon: coupon,
-              }}
-            />
-
-            <CouponForm
-              {...{
-                planId: selectedPlan.plan_id,
-                readOnly: false,
-                subscriptionInProgress: inProgress || transactionInProgress,
-                coupon,
-                setCoupon,
-              }}
-            />
-          </div>
-        )}
       </div>
     </>
   );
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
index c265ed9b21..19f7d68213 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
@@ -34,7 +34,7 @@ export const PlanUpgradeDetails = ({
 
   return (
     <section
-      className={`plan-upgrade-details-component mt-6 tablet:max-w-xs ${className}`}
+      className={`plan-upgrade-details-component pt-6 tablet:pt-0 ${className}`}
       {...{ role }}
       data-testid="plan-upgrade-details-component"
     >
diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
index 91cf8f7036..96e86d6c0b 100644
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
@@ -120,8 +120,20 @@ export const SubscriptionUpgrade = ({
       )}
       <Header {...{ profile }} />
       <div className="main-content">
+        <div className="payment-panel">
+          <PlanUpgradeDetails
+            {...{
+              profile,
+              selectedPlan,
+              upgradeFromPlan,
+              isMobile,
+              showExpandButton: isMobile,
+            }}
+          />
+        </div>
+
         <div
-          className="product-payment product-upgrade"
+          className="product-payment product-upgrade rounded-lg tablet:rounded-t-none"
           data-testid="subscription-upgrade"
         >
           {!isMobile ? (
@@ -197,15 +209,6 @@ export const SubscriptionUpgrade = ({
             </div>
           </Form>
         </div>
-        <PlanUpgradeDetails
-          {...{
-            profile,
-            selectedPlan,
-            upgradeFromPlan,
-            isMobile,
-            showExpandButton: isMobile,
-          }}
-        />
         {mobileUpdateHeading}
       </div>
     </>
diff --git a/packages/fxa-payments-server/src/styles/tailwind.css b/packages/fxa-payments-server/src/styles/tailwind.css
index f47d936707..44a91add02 100644
--- a/packages/fxa-payments-server/src/styles/tailwind.css
+++ b/packages/fxa-payments-server/src/styles/tailwind.css
@@ -26,7 +26,7 @@
 }
 
 .payment-panel {
-  @apply mb-6 tablet:mt-6 tablet:max-w-xs tablet:col-start-2 tablet:col-end-auto tablet:row-start-1 tablet:row-end-3;
+  @apply mb-6 tablet:mt-6 tablet:min-w-[18rem] tablet:max-w-xs tablet:col-start-2 tablet:col-end-auto tablet:row-start-1 tablet:row-end-3;
 }
 
 /* footer copy */
@@ -52,7 +52,7 @@
 
 /* shared styles used in Checkout and SubscriptionCreate*/
 .pay-with-heading {
-  @apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mx-0 mb-6 text-center text-grey-400 w-full;
+  @apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mb-6 text-grey-400;
   @apply before:content-[''] before:border-b before:border-0 before:border-solid before:border-grey-200;
   @apply after:content-[''] after:border-b after:border-0 after:border-solid after:border-grey-200;
 }
@@ -128,8 +128,9 @@
 }
 
 .main-content {
-  @apply grid mt-16 mx-6;
-  @apply tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:gap-x-12 tablet:mt-[80px] tablet:mb-auto tablet:mx-3;
+  @apply mt-16 mx-7 min-h-[calc(100vh_-_4rem)];
+  @apply tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mt-[80px] tablet:mb-auto;
+  @apply desktop:grid-cols-[600px_1fr];
 }
 
 .payment-button {