Fixed breadcrumbs container overflow in object browser (#1880)

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

portal-ui/src/index.tsx

@@ -102,7 +102,7 @@ const GlobalCss = withStyles({
     ul: {
       paddingLeft:20,
       listStyle: "none", /* Remove default bullets */
-      "& li::before": {
+      "& li::before:not(.Mui*)": {
         content: '"￭"',
         color: "#2781B0",
         fontSize: 20,
@@ -113,7 +113,7 @@ const GlobalCss = withStyles({
       },
       "& ul": {
         listStyle: "none", /* Remove default bullets */
-        "& li::before": {
+        "& li::before:not(.Mui*)": {
           content: '"￮"',
           color: "#2781B0",
           fontSize: 20,

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

@@ -1342,8 +1342,11 @@ const ListObjects = ({
                 resource={bucketName}
                 errorProps={{ disabled: true }}
               >
-                <Grid item xs={12}>
-                  <Grid item xs={12} className={classes.breadcrumbsContainer}>
+                <Grid
+                  item
+                  xs={12}
+                >
+                  <Grid item xs={12} className={classes.breadcrumbsContainer} >
                     <BrowserBreadcrumbs
                       bucketName={bucketName}
                       internalPaths={pageTitle}

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -411,9 +411,13 @@ export const objectBrowserCommon = {
     textAlign: "left" as const,
     marginLeft: 15,
     marginRight: 10,
+    width: 0, // WA to avoid overflow if child elements in flexbox list.**
   },
 };
 
+// ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
+// "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)"
+
 export const selectorsCommon = {
   multiSelectTable: {
     height: 200,
@@ -1366,6 +1370,9 @@ export const detailsPanel: any = {
       "&:last-of-type": {
         borderBottom: 0,
       },
+      "&::before": {
+        content: "' '",
+      },
     },
   },
 };