Merge pull request #4141 from ethereum/ferow

FE tooltips are back.

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -86,7 +86,11 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr
 
   return (
     <>
-      <CustomTooltip placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'} tooltipText={title} delay={{show: 1000, hide: 0}}>
+      <CustomTooltip
+        placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
+        tooltipText={title}
+        delay={{show: 1000, hide: 0}}
+      >
         <div
           className={`remixui_icon m-2  pt-1`}
           onClick={() => {

libs/remix-ui/workspace/src/lib/components/file-label.tsx

@@ -1,5 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import {fileDecoration} from '@remix-ui/file-decorators'
+import {CustomTooltip} from '@remix-ui/helper'
+import {FormattedMessage} from 'react-intl'
 import React, {useEffect, useRef, useState} from 'react'
 import {FileType} from '../types'
 export interface FileLabelProps {
@@ -65,18 +67,28 @@ export const FileLabel = (props: FileLabelProps) => {
     labelRef.current.innerText = file.name
   }
 
+  // The tooltip is setted up on the label and not the whole line to avoid unnecessary tooltips on the short filenames.
+  // It has the delay for the same reason.
   return (
     <div
-      className="remixui_items d-inline-block w-100 text-break"
+      className="remixui_items d-inline-block w-100"
       ref={isEditable ? labelRef : null}
       suppressContentEditableWarning={true}
       contentEditable={isEditable}
       onKeyDown={handleEditInput}
       onBlur={handleEditBlur}
     >
-      <span className={`text-nowrap remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')} data-path={file.path}>
-        {file.name}
-      </span>
+      <CustomTooltip
+        placement="top"
+        delay={{show: 1000, hide: 0}}
+        tooltipText={`${file.path}`}
+        tooltipId={`fileExplorer.${file.path}`}
+        tooltipClasses="text-nowrap"
+      >
+        <span className={`remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')} data-path={file.path}>
+          {file.name}
+        </span>
+      </CustomTooltip>
     </div>
   )
 }

libs/remix-ui/workspace/src/lib/css/file-explorer.css

@@ -33,7 +33,11 @@ input[type="file"] {
     margin-left       : 20px;
 }
 .remixui_items              {
-    display           : inline
+    display           : inline;
+    white-space       : nowrap;
+    overflow          : hidden;
+    text-overflow     : ellipsis;
+    max-width         : 90%;
 }
 .remixui_remove             {
     margin-left       : auto;

libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css

@@ -40,7 +40,7 @@
     cursor            : pointer;
   }
   .remixui_treeview {
-    overflow-y        : auto;
+    overflow-x        : hidden;
   }
   .remixui_dialog {
     display: flex;