improve text truncation

client/package-lock.json

@@ -1410,6 +1410,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-dotdotdot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dotdotdot/-/react-dotdotdot-1.2.0.tgz",
+      "integrity": "sha512-kFOsUbs25AH4CNKOQsT3z7tpEeEAHDMcQ8aIvfuIlfhaH8MxO1UTpBi1rIm94smGWRmpNyVELb/v88gEcC98GQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-helmet": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.8.tgz",
@@ -12552,7 +12561,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
       "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       },
@@ -12560,8 +12568,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
         }
       }
     },
@@ -16186,6 +16193,14 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-dotdotdot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-dotdotdot/-/react-dotdotdot-1.2.3.tgz",
+      "integrity": "sha512-lYCHCegi76+kqmgqkii/ma2QqsfA1Slf5jTJYWKgnT3uz8EkPaO9hRDPMDEsDHEBua2qOXSxWCHxVf4N740W1w==",
+      "requires": {
+        "object.pick": "^1.3.0"
+      }
+    },
     "react-error-overlay": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.4.tgz",

client/package.json

@@ -22,6 +22,7 @@
     "react": "^16.8.6",
     "react-datepicker": "^2.3.0",
     "react-dom": "^16.8.6",
+    "react-dotdotdot": "^1.2.3",
     "react-ga": "^2.5.7",
     "react-helmet": "^5.2.0",
     "react-markdown": "^4.0.6",
@@ -41,6 +42,7 @@
     "@types/react": "^16.8.13",
     "@types/react-datepicker": "^2.2.1",
     "@types/react-dom": "^16.8.3",
+    "@types/react-dotdotdot": "^1.2.0",
     "@types/react-helmet": "^5.0.8",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-transition-group": "^2.8.0",

client/src/routes/Publish/Files/Item.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import styles from './Item.module.scss'
 import filesize from 'filesize'
+import Dotdotdot from 'react-dotdotdot'
 
 const Item = ({
     item,
@@ -15,8 +16,8 @@ const Item = ({
     removeItem(): void
 }) => (
     <li>
-        <a href={item.url} className={styles.linkUrl}>
-            {item.url}
+        <a href={item.url} className={styles.linkUrl} title={item.url}>
+            <Dotdotdot clamp={1}>{item.url}</Dotdotdot>
         </a>
         <div className={styles.details}>
             <span>URL {item.found ? 'confirmed' : ' not confirmed'}</span>