Content Editor: Fix workspace footer breadcrumb overflow hiding (closes #20132)

[engijlr]

Summary

• Allow breadcrumb components to shrink within the footer layout by adding min-width: 0 and overflow: hidden to both umb-workspace-breadcrumb and umb-workspace-variant-menu-breadcrumb
• Remove temporary flex-direction: row-reverse workaround from the variant breadcrumb that was masking the issue

Screenshots

Test plan

• Create a deeply nested document structure (5+ levels) with long names
• Open the deepest document and verify the breadcrumb collapses properly
• Verify the Save/Publish actions remain visible and clickable
• Test with both variant (multi-language) and non-variant document types
• Resize the browser to confirm the layout holds at narrow widths

Fixed: #20132

[leekelleher]

@engijlr I've tested this out and having mixed success with it. Sometimes it will show the breadcrumb as collapsed, then when I navigate elsewhere and return to it (or reload the page), the breadcrumb will take up 100% of the screen width, shifting the left-side/tree, and right/workspace-actions off-screen.

I've tried taking a look into a resolution/workaround, but I got slightly lost with where UUI and CMS components overlap. 😕

[engijlr]

Hey @leekelleher thank you so much for testing the PR. It was a bit difficult for me to reproduce the issue and when I finally did it was very inconsistent 😞. Doing some investigation, it seems the main problem is in the responsive container. I made a PR in the UI library to fix it: [umbraco/Umbraco.UI/pull/1359]. I will mark this as a draft in the meantime but I could not reproduce the issue in the isolated storybook setup, I hope it works 🤞

[leekelleher]

@engijlr I noticed a comment added to the original issue, #20132 (comment), about the --umb-split-panel-slot-overflow variable. If that helps?

[claude]

Claude finished @engijlr's task in 2m 23s —— View job

---

PR Review

• Gather context and understand the request
• Read the review skill procedure
• Read changed files
• Analyze the diff against base branch
• Review for correctness, architecture, and style
• Post inline comments for findings
• Post summary comment
• Apply labels (area/frontend, category/ux, category/ui)

---

PR Review

Target: origin/v17/dev · Based on commit: 9892f236 · Skipped: 0 noise files out of 2 total

Fixes breadcrumb overflow in the workspace footer by adding overflow: hidden and min-width: 0 to both breadcrumb host elements, allowing them to shrink as flex items. Also removes the flex-direction: row-reverse workaround from the variant breadcrumb.

---

Suggestions

• workspace-variant-menu-breadcrumb.element.ts:167: Removing display: flex changes the :host's display type from flex back to inline (the default for custom elements). The non-variant breadcrumb has always lacked an explicit display, so aligning them is intentional — but it's worth verifying that overflow: hidden clips correctly in context, since that property has no effect on inline elements unless the parent flex container causes the host to become a block-level flex item. If UmbTextStyles doesn't set a block-level display, a one-liner display: block or display: contents on :host would make the clipping behavior explicit and consistent.

• Overall completeness: @leekelleher's review comment noted the breadcrumb occasionally reverts to full width after navigation or page reload, which points to a timing/layout reset issue in the UUI responsive container rather than a pure CSS shrink problem. The author's companion UI library PR (umbraco/Umbraco.UI#1359) targets that root cause. It's worth confirming whether that PR needs to land (and be consumed here) before this fix is fully reliable, or whether merging the CSS-only fix now and updating UUI later is the intended sequence.

---

No breaking changes detected — these are purely internal :host CSS changes with no exported API surface modifications.

Approved with Suggestions for improvement

Good to go from a code-correctness standpoint, but please carefully consider the completeness question raised above regarding the UUI library dependency before merging.

[engijlr]

Hey @leekelleher the changes from the UI library are now applied to the backoffice. I think this is ready for another review, when you have the time of course. In my case is working fine, I tried the reload and resize and seems to work fine. But let me know 😄

[leekelleher]

@engijlr Does this PR need to re-target v18 (main branch), as the fix was added to UUI v2.0-rc.

[engijlr]

You are right @leekelleher I just rebase it

[leekelleher]

Tested out, breadcrumb collapsing working great! 🚀