From 0e9acae8ca3f9326214e25c338570fe283768d19 Mon Sep 17 00:00:00 2001
From: ianlapham <ianlapham@gmail.com>
Date: Thu, 25 Feb 2021 11:56:25 -0500
Subject: [PATCH] fix mobile styles

---
 src/components/card.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/card.js b/src/components/card.js
index cc874f9..11fd9e5 100644
--- a/src/components/card.js
+++ b/src/components/card.js
@@ -21,7 +21,7 @@ const StyledCard = styled(Link)`
     max-width: initial;
   }
   @media screen and (max-width: 414px) {
-    width: 100%;
+    width: 320px;
     box-sizing: border-box;
   }
   :hover {
@@ -51,6 +51,10 @@ const TokensListed = styled.span`
   line-height: 150%;
 `
 
+const NameText = styled.h3`
+  word-wrap: break-word;
+`
+
 function getLogoURL(logoURI) {
   if (logoURI?.startsWith('ipfs://')) {
     return `https://ipfs.io/ipfs/${logoURI.split('//')[1]}`
@@ -76,7 +80,7 @@ export default function Card({ id, list, name }) {
         }}
       />
       <section>
-        <h3>{actualName}</h3>
+        <NameText>{actualName}</NameText>
         <TokensListed>
           {list?.tokens?.length > 0 ? `${list.tokens.length} tokens` : list === null ? 'Error' : 'Loading...'}
         </TokensListed>