From 12bc5265b862d6417457b59f58c575537da94edd Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Thu, 12 Nov 2020 16:33:56 -0600
Subject: [PATCH] Fixed issue with object browser icons & long names (#389)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>
---
 .../Objects/ListObjects/ListObjects.tsx            | 14 +++++++++++---
 .../Console/ObjectBrowser/BrowseBuckets.tsx        |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index 1ee17e28ba..4395a610af 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -52,6 +52,7 @@ const commonIcon = {
   backgroundRepeat: "no-repeat",
   backgroundPosition: "center center",
   width: 16,
+  minWidth: 16,
   height: 40,
   marginRight: 10,
 };
@@ -90,6 +91,11 @@ const styles = (theme: Theme) =>
       display: "flex",
       alignItems: "center",
     },
+    fileNameText: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
     iconFolder: {
       backgroundImage: "url(/images/ob_folder_clear.svg)",
       ...commonIcon,
@@ -107,10 +113,10 @@ const styles = (theme: Theme) =>
       height: "calc(100vh - 280px)",
     },
     "@global": {
-      ".rowElementRaw:hover  .iconFileElm": {
+      ".rowLine:hover  .iconFileElm": {
         backgroundImage: "url(/images/ob_file_filled.svg)",
       },
-      ".rowElementRaw:hover  .iconFolderElm": {
+      ".rowLine:hover  .iconFolderElm": {
         backgroundImage: "url(/images/ob_folder_filled.svg)",
       },
     },
@@ -374,7 +380,9 @@ const ListObjects = ({
     return (
       <div className={classes.fileName}>
         <div className={icon} />
-        <span>{splitItem[splitItem.length - 1]}</span>
+        <span className={classes.fileNameText}>
+          {splitItem[splitItem.length - 1]}
+        </span>
       </div>
     );
   };
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
index 31223fad1f..428e6e4f9f 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
@@ -90,7 +90,7 @@ const styles = (theme: Theme) =>
       marginRight: 10,
     },
     "@global": {
-      ".rowElementRaw:hover  .iconBucketElm": {
+      ".rowLine:hover  .iconBucketElm": {
         backgroundImage: "url(/images/ob_bucket_filled.svg)",
       },
     },