From 48e35c9163f74599fb8abf2911f6b5971d9881c7 Mon Sep 17 00:00:00 2001
From: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date: Tue, 27 Oct 2020 17:56:59 -0300
Subject: [PATCH] Fix overlaping product titles on mobile

Add an `extra-loose` line-height so it prevents
produt title to overlap on mobile screens.
---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 components/product/ProductCard/ProductCard.tsx        | 2 +-
 tailwind.config.js                                    | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 0c8dd1c04..72e517f18 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -101,7 +101,7 @@
 }
 
 .productTitle {
-  @apply pt-2 max-w-full w-full;
+  @apply max-w-full w-full;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index f047136b4..3eacee42d 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -57,7 +57,7 @@ const ProductCard: FC<Props> = ({
             <div className={s.squareBg} />
             <div className="flex flex-row justify-between box-border w-full z-20 absolute">
               <div className="absolute top-0 left-0 pr-16 max-w-full">
-                <h3 className={s.productTitle}>
+                <h3 className={cn('leading-extra-loose pt-0 sm:pt-2 sm:leading-normal', s['productTitle'])}>
                   <span>{p.name}</span>
                 </h3>
                 <span className={s.productPrice}>{price}</span>
diff --git a/tailwind.config.js b/tailwind.config.js
index ec80f58e3..3535079a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,6 +46,9 @@ module.exports = {
         magical:
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },
+      lineHeight: {
+        'extra-loose': '2.3'
+      }
     },
   },
   plugins: [require('@tailwindcss/ui')],