Solved long file names UI issues in object browser (#2036)

Solved long file names issues in object browser

- Fixed icon size & position in list
- Fixed object name overflow issue
- Fixed object details title icon size

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/IconWithLabel.tsx

@@ -3,6 +3,12 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Theme } from "@mui/material/styles";
 
+interface IIconWithLabel {
+  classes: any;
+  icon: JSX.Element;
+  strings: string[];
+}
+
 const styles = (theme: Theme) =>
   createStyles({
     fileName: {
@@ -12,6 +18,8 @@ const styles = (theme: Theme) =>
         width: 16,
         height: 16,
         marginRight: 4,
+        minWidth: 16,
+        minHeight: 16,
       },
     },
     fileNameText: {
@@ -21,16 +29,12 @@ const styles = (theme: Theme) =>
     },
   });
 
-const IconWithLabel = (props: {
-  classes: any;
-  icon: JSX.Element;
-  strings: string[];
-}) => {
+const IconWithLabel = ({ classes, icon, strings }: IIconWithLabel) => {
   return (
-    <div className={props.classes.fileName}>
-      {props.icon}
-      <span className={props.classes.fileNameText}>
-        {props.strings[props.strings.length - 1]}
+    <div className={classes.fileName}>
+      {icon}
+      <span className={classes.fileNameText}>
+        {strings[strings.length - 1]}
       </span>
     </div>
   );

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx

@@ -92,6 +92,12 @@ const styles = () =>
     ObjectDetailsTitle: {
       display: "flex",
       alignItems: "center",
+      "& .min-icon": {
+        width: 26,
+        height: 26,
+        minWidth: 26,
+        minHeight: 26,
+      }
     },
     objectNameContainer: {
       whiteSpace: "nowrap",
@@ -627,7 +633,7 @@ const ObjectDetailPanel = ({
           <Box className={classes.detailContainer}>
             <strong>Name:</strong>
             <br />
-            {objectName}
+            <div style={{ overflowWrap: "break-word" }}>{objectName}</div>
           </Box>
           {selectedVersion !== "" && (
             <Box className={classes.detailContainer}>