From 997052a8729d1738dbb52cff4b1e27461416d4cb Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Wed, 20 Apr 2022 22:38:23 -0600
Subject: [PATCH] Fixed breadcrumbs container overflow in object browser
 (#1880)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 portal-ui/src/index.tsx                                    | 4 ++--
 .../ListBuckets/Objects/ListObjects/ListObjects.tsx        | 7 +++++--
 .../Console/Common/FormComponents/common/styleLibrary.ts   | 7 +++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/portal-ui/src/index.tsx b/portal-ui/src/index.tsx
index a41b46fd0..3a4f8a957 100644
--- a/portal-ui/src/index.tsx
+++ b/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,
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 00cb33068..5ac41507d 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
@@ -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}
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 29cde11d5..8dd893299 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/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: "' '",
+      },
     },
   },
 };