fix mobile styles

Uniswap · Feb 25, 2021 · 0e9acae · 0e9acae · vercel · Feb 25, 2021
1 parent c08e545
commit 0e9acae
Showing 1 changed file with 6 additions and 2 deletions.
diff --git 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>