From b0027a79abebb27c18fec193eec0865a602f76e3 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 18 Oct 2021 12:10:41 +0200
Subject: [PATCH] Fixed long names wrapping for product cards

---
 ghost/portal/src/components/common/ProductsSection.js | 5 +++--
 ghost/portal/src/utils/fixtures.js                    | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
index 693fd89900..2b29b19d2f 100644
--- a/ghost/portal/src/components/common/ProductsSection.js
+++ b/ghost/portal/src/components/common/ProductsSection.js
@@ -292,12 +292,13 @@ export const ProductsSectionStyles = ({site}) => {
         /* Vertical card style - for smaller screens sizes*/
         .gh-portal-product-card.vertical {
             display: none !important;
-            grid-template-columns: 16px auto minmax(0, 300px);
+            grid-template-columns: 16px minmax(0, 1fr) auto;
             column-gap: 12px;
             row-gap: 8px;
             align-items: center;
             min-height: 68px;
             padding: 12px 20px;
+            justify-content: unset;
         }
 
         .gh-portal-product-card.vertical .gh-portal-plan-checkbox {
@@ -320,7 +321,7 @@ export const ProductsSectionStyles = ({site}) => {
             font-weight: 500;
             text-transform: none;
             text-align: left;
-            margin: 4px 0;
+            margin: 4px 12px 4px 0;
             padding: 0;
             border-bottom: none;
             min-height: unset;
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 3a1134a606..c4ba97ee80 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -12,7 +12,7 @@ function objectId() {
 }
 
 export function getSiteData({
-    products = getProductsData({numOfProducts: 1}),
+    products = getProductsData({numOfProducts: 3}),
     portalProducts = products.map(p => p.id),
     portalPlans: portal_plans = ['free', 'monthly', 'yearly']
 } = {}) {
@@ -131,11 +131,11 @@ export function getProductsData({numOfProducts = 3} = {}) {
             numOfBenefits: 3
         }),
         getProductData({
-            name: 'Gold',
+            name: 'Friends of the browser',
             description: 'Get access to everything and lock in early adopter pricing for life + listen to my podcast',
             monthlyPrice: getPriceData({
                 interval: 'month',
-                amount: 2000
+                amount: 18000
             }),
             yearlyPrice: getPriceData({
                 interval: 'year',