Alternative Vue breadcrumb injection method

What does this MR do and why?

We have various problems with breadcrumbs on Vue pages, all stemming from our injection of a new GlBreadcrumb next to the existing one used for static pages.

This MR proposes a different method for injecting those breadcrumbs that takes the items from the static GlBreadcrumb and adds them to the newly injected one, then deletes the static one so that only a single GlBreadcrumb remains.

References

• Work items - Breadcrumbs can get stuck unexpanded (#533913 - closed)
• https://gitlab.com/gitlab-org/gitlab/-/issues/512715
• fix(GlBreadcrumb): Fix extreme customer edge case (gitlab-ui!5054 - closed)
• Unexpected breadcrumb collapsing behavior on Ne... (#534138 - closed)
• #523713 (comment 2431168243)

Screenshots or screen recordings

Before	After
Screen_Recording_2025-04-03_at_17.54.50	Screen_Recording_2025-04-03_at_17.54.01

How to set up and validate locally

1. Check out this branch
2. ensure the work items issue view is turned on in your GDK
3. Create a group called MLS
4. Create a project inside the group called MLS Portal
5. Visit the issues page
   1. You should see that the breadcrumb is not flickering
6. Squeeze your viewport down to a very narrow width
   1. The breadcrumbs will collapse
7. Re-expand your viewport
   1. The breadcrumbs will re-expand to fit
8. Create an issue in the project
   1. The breadcrumb will be correct on the new issue page
9. Go back to the issues list
10. open the issue in the drawer
11. expand the issue
    1. The breadcrumbs will be correctly updated

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #533913 (closed)