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. 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' } } }); } }); }