fix(files): wrap tooltips of long file names (#1709)

- Set break-word property to tooltip.
- Changed overflow of rows to visible.
- Set tooltip width to not exceed the menus width.

Closes  #1464

src/components/tooltip/Tooltip.js

@@ -48,8 +48,10 @@ export default class Tool extends React.Component {
         <div style={{
           bottom: '-10px',
           left: '50%',
-          transform: 'translate(-50%, 100%)'
-        }} className={`nowrap white z-max bg-navy-muted br2 pa1 f6 absolute ${(show && overflow) ? 'db' : 'dn'}`}>
+          transform: 'translate(-50%, 100%)',
+          wordWrap: 'break-word',
+          width: '100%'
+        }} className={`white z-max bg-navy-muted br2 pa1 f6 absolute ${(show && overflow) ? 'db' : 'dn'}`}>
           <span style={{
             width: '17px',
             height: '17px',

src/files/file/File.js

@@ -81,7 +81,7 @@ const File = ({
     className += ' selected'
   }
 
-  const styles = { height: 55, overflow: 'hidden' }
+  const styles = { height: 55, overflow: 'visible' }
 
   if (focused || (selected && !translucent) || coloured || (isOver && canDrop)) {
     styles.backgroundColor = '#F0F6FA'