From 9a800c9158ce044dfb644d8eb4819805c68f7c50 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 7 Sep 2021 15:33:40 +0300
Subject: [PATCH 1/2] Font-size was too big for Stripe Elements on
 PaymentMethodsForm too

---
 src/forms/PaymentMethodsForm/PaymentMethodsForm.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/forms/PaymentMethodsForm/PaymentMethodsForm.js b/src/forms/PaymentMethodsForm/PaymentMethodsForm.js
index e90927fe66..f49ee00661 100644
--- a/src/forms/PaymentMethodsForm/PaymentMethodsForm.js
+++ b/src/forms/PaymentMethodsForm/PaymentMethodsForm.js
@@ -60,10 +60,14 @@ const stripeElementsOptions = {
   ],
 };
 
+// card (being a Stripe Elements component), can have own styling passed to it.
+// However, its internal width-calculation seems to break if font-size is too big
+// compared to component's own width.
+const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
 const cardStyles = {
   base: {
     fontFamily: '"poppins", Helvetica, Arial, sans-serif',
-    fontSize: '18px',
+    fontSize: isMobile ? '14px' : '18px',
     fontSmoothing: 'antialiased',
     lineHeight: '24px',
     letterSpacing: '-0.1px',
@@ -114,10 +118,10 @@ class PaymentMethodsForm extends Component {
       this.card.addEventListener('change', this.handleCardValueChange);
       // EventListener is the only way to simulate breakpoints with Stripe.
       window.addEventListener('resize', () => {
-        if (window.innerWidth < 1024) {
-          this.card.update({ style: { base: { fontSize: '18px', lineHeight: '24px' } } });
+        if (window.innerWidth < 768) {
+          this.card.update({ style: { base: { fontSize: '14px', lineHeight: '24px' } } });
         } else {
-          this.card.update({ style: { base: { fontSize: '20px', lineHeight: '32px' } } });
+          this.card.update({ style: { base: { fontSize: '18px', lineHeight: '24px' } } });
         }
       });
     }

From 0e38b368c140098872fb455348f6ea8ba1b262de Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 7 Sep 2021 15:34:57 +0300
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f1eaed9d05..55971e9fc1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,9 @@ way to update this template, but currently, we follow a pattern:
 ---
 
 ## Upcoming version 2021-XX-XX
+
+- [fix] Font-size was too big for Stripe Elements on small screens on PaymentMethodsForm.
+  [#1471](https://github.com/sharetribe/ftw-daily/pull/1471)
 - [fix] Remove unnecessary language import: fr.json
   [#1469](https://github.com/sharetribe/ftw-daily/pull/1469)
 - [fix] Font-size for Poppins font was too big for Stripe Elements on small screens.