From 20d7ff47137671007d0a4a9a09fa0f67b13742d9 Mon Sep 17 00:00:00 2001
From: Giuliano Mele <giuliano.mele@web.de>
Date: Mon, 11 Jan 2021 23:04:17 +0100
Subject: [PATCH] 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 | 6 ++++--
 src/files/file/File.js            | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 16fd0a921..f77577751 100644
--- a/src/components/tooltip/Tooltip.js
+++ b/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',
diff --git a/src/files/file/File.js b/src/files/file/File.js
index 40c3ca593..a7f66609c 100644
--- a/src/files/file/File.js
+++ b/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'