Merge branch 'breadcrumbs-temporary-fix' into 'master'

Temporarily restore old breadcrumbs UX

See merge request !148673



Merged-by: Florie Guibert <fguibert@gitlab.com>
Approved-by: Chad Lavimoniere <clavimoniere@gitlab.com>
Approved-by: Thomas Hutterer <thutterer@gitlab.com>
Approved-by: Florie Guibert <fguibert@gitlab.com>
Reviewed-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Reviewed-by: Thomas Hutterer <thutterer@gitlab.com>
Co-authored-by: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>

app/assets/stylesheets/framework/breadcrumbs.scss

@@ -11,3 +11,25 @@
     vertical-align: sub;
   }
 }
+
+/*
+ * This temporarily restores the legacy breadcrumbs styles on the primary HAML breadcrumbs.
+ * Those styles got changed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3663,
+ * causing a regression in this particular instance which does not use a Vue component and is
+ * therefore unable to collapse overflowing items within a disclosure dropdown.
+ * These temporary overrides will be removed as part of https://gitlab.com/gitlab-org/gitlab/-/issues/358113.
+ */
+.tmp-breadcrumbs-fix {
+  .gl-breadcrumb-list {
+    flex-wrap: wrap;
+    max-width: none;
+
+    .gl-breadcrumb-item {
+      > a {
+        @include media-breakpoint-down(xs) {
+          @include str-truncated($breadcrumb-max-width);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml

@@ -2,7 +2,7 @@
 - unless @skip_current_level_breadcrumb
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
-%nav.breadcrumbs.gl-breadcrumbs{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
+%nav.breadcrumbs.gl-breadcrumbs.tmp-breadcrumbs-fix{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
   %ul.breadcrumb.gl-breadcrumb-list.js-breadcrumbs-list.gl-flex-grow-1
     - unless hide_top_links
       = header_title