fix(content-explorer): fix text ellipsis in breadcrumbs (#3481)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Jan 5, 2024 · 6099b1d · 6099b1d
1 parent fa68f9b
commit 6099b1d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/features/content-explorer/content-explorer/ContentExplorer.scss b/src/features/content-explorer/content-explorer/ContentExplorer.scss
@@ -162,6 +162,10 @@
     }
 }
 
+.bdl-ContentExplorerBreadcrumbs-crumbLink {
+    width: 100%;
+}
+
 .content-explorer .modal-actions .status-message {
     margin-right: auto;
 }

diff --git a/src/features/content-explorer/content-explorer/ContentExplorerBreadcrumbs.js b/src/features/content-explorer/content-explorer/ContentExplorerBreadcrumbs.js
@@ -30,9 +30,11 @@ const ContentExplorerBreadcrumbs = ({
             <IconChevron direction="left" size="6px" color="#333" />
         </Button>
         <Breadcrumb label={formatMessage(messages.breadcrumb)} {...breadcrumbProps}>
+            {/* The outer div for each crumb prevents styling conflicts when the crumbs menu is active */}
             {foldersPath.map((folder, i) => (
                 <div key={folder.id} className="lnk">
                     <PlainButton
+                        className="bdl-ContentExplorerBreadcrumbs-crumbLink"
                         data-testid="breadcrumb-lnk"
                         onClick={event => onBreadcrumbClick(i, event)}
                         title={folder.name}