more truncation with react-dotdotdot

client/src/components/molecules/AccountStatus/Popover.module.scss

@@ -46,7 +46,6 @@ $popoverWidth: 18rem;
 }
 
 .address {
-    width: 15rem;
     display: block;
     white-space: nowrap;
     overflow: hidden;

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import Dotdotdot from 'react-dotdotdot'
 import { User } from '../../../context/User'
 import styles from './Popover.module.scss'
 
@@ -40,12 +41,11 @@ export default class Popover extends PureComponent<{
                     <>
                         <div className={styles.popoverInfoline}>
                             {account ? (
-                                <span
-                                    className={styles.address}
-                                    title={account}
-                                >
-                                    {account}
-                                </span>
+                                <Dotdotdot clamp={1}>
+                                    <span className={styles.address}>
+                                        {account}
+                                    </span>
+                                </Dotdotdot>
                             ) : (
                                 <em>No account selected</em>
                             )}

client/src/components/molecules/Asset.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import moment from 'moment'
+import Dotdotdot from 'react-dotdotdot'
 import Markdown from '../../components/atoms/Markdown'
 import styles from './Asset.module.scss'
 import CategoryImage from '../atoms/CategoryImage'
@@ -28,10 +29,10 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
                     <CategoryImage category={base.categories[0]} />
                 )}
                 <h1>{base.name}</h1>
-                <Markdown
-                    className={styles.description}
-                    text={`${base.description.substring(0, 90)}...`}
-                />
+
+                <div className={styles.description}>
+                    <Dotdotdot clamp={3}>{base.description}</Dotdotdot>
+                </div>
 
                 <footer className={styles.assetFooter}>
                     {base.categories && <div>{base.categories[0]}</div>}

client/src/components/organisms/Web3message.module.scss

@@ -10,6 +10,10 @@
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
     text-align: left;
+
+    > div {
+        display: inline-block;
+    }
 }
 
 .account {

client/src/components/organisms/Web3message.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import Dotdotdot from 'react-dotdotdot'
 import Button from '../atoms/Button'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Web3message.module.scss'
@@ -33,10 +34,11 @@ export default class Web3message extends PureComponent {
 
     private haveAccount = (account: string) => (
         <div className={styles.message}>
-            <AccountStatus className={styles.status} /> Connected with account
-            <code className={styles.account} title={account && account}>
-                {`${account && account.substring(0, 20)}...`}
-            </code>
+            <AccountStatus className={styles.status} />
+            <Dotdotdot clamp={1}>
+                Connected with account
+                <code className={styles.account}>{account}</code>
+            </Dotdotdot>
         </div>
     )