Introduce mixin for global breadcrumb styles. Thus we can avoid the use of component styles in a global style sheet. Further the number of *breadcrumb.sass files was reduced from three to two (global and component)

app/controllers/wiki_controller.rb

@@ -439,10 +439,6 @@ class WikiController < ApplicationController
     @page&.ancestors&.any?
   end
 
-  def show_local_breadcrumb_defaults
-    false
-  end
-
   def redirect_to_show
     redirect_to action: :show, project_id: @project, id: @page
   end

app/helpers/breadcrumb_helper.rb

@@ -30,13 +30,7 @@
 
 module BreadcrumbHelper
   def full_breadcrumb
-    if show_defaults
-      breadcrumb_list(link_to(icon_wrapper('icon2 icon-home', I18n.t(:label_home)), home_path),
-                      link_to_project_ancestors(@project),
-                      *breadcrumb_paths)
-    else
-      breadcrumb_list(*breadcrumb_paths)
-    end
+    breadcrumb_list(*breadcrumb_paths)
   end
 
   def breadcrumb(*args)
@@ -48,17 +42,13 @@ module BreadcrumbHelper
     elements = args.flatten
     breadcrumb_elements = [content_tag(:li,
                                        elements.shift.to_s,
-                                       class: 'first-breadcrumb-element',
-                                       style: 'list-style-image:none;')]
+                                       class: 'first-breadcrumb-element')]
 
     breadcrumb_elements += elements.map do |element|
       if element
-        css_class = if element.try(:include?, 'op-breadcrumb-project-title')
-                      'op-breadcrumb-project-element '
-                    end
         content_tag(:li,
                     h(element.to_s),
-                    class: "#{css_class} icon4 icon-small icon-arrow-right5")
+                    class: "icon4 icon-small icon-arrow-right5")
       end
     end
 
@@ -83,28 +73,4 @@ module BreadcrumbHelper
       false
     end
   end
-
-  def show_defaults
-    if !!(defined? show_local_breadcrumb_defaults)
-      show_local_breadcrumb_defaults
-    else
-      false
-    end
-  end
-
-  private
-
-  def link_to_project_ancestors(project)
-    if project && !project.new_record?
-      ancestors = (project.root? ? [] : project.ancestors.visible.to_a)
-      ancestors << project
-      ancestors.map do |p|
-        if p == project
-          link_to_project(p, { only_path: false }, title: p, class: 'op-breadcrumb-project-title nocut').html_safe
-        else
-          link_to_project(p, { jump: current_menu_item }, title: p, class: 'op-breadcrumb-project-title').html_safe
-        end
-      end
-    end
-  end
 end

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.html

@@ -3,7 +3,7 @@
     [attr.title]="parent.name"
     uiSref="work-packages.show"
     [uiParams]="{workPackageId: parent.id}"
-    class="op-wp-breadcrumb-parent op-breadcrumb-project-title nocut"
+    class="op-wp-breadcrumb-parent nocut"
     data-qa-selector="op-wp-breadcrumb-parent">
     <span [textContent]="parent.name"></span>
   </a>

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.html

@@ -16,12 +16,12 @@
              [textContent]="ancestor.name"
              uiSref="work-packages.show"
              [uiParams]="{workPackageId: ancestor.id}"
-             class="op-breadcrumb-project-title nocut"></a>
+             class="nocut"></a>
         </li>
       </ng-container>
     </ng-container>
     <li
-        [ngClass]="{ 'active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
+        [ngClass]="{ 'op-wp-breadcrumb--active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
       <wp-breadcrumb-parent (onSwitch)="updateActiveInput($event)" [workPackage]="workPackage"></wp-breadcrumb-parent>
     </li>
   </ul>

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass

@@ -1,3 +1,15 @@
+@import "src/assets/sass/helpers"
+
 .op-wp-breadcrumb
-  .active-parent-select
-    min-width: 320px
+  @include global-breadcrumb-styles
+  height: initial
+
+  &--ellipsed
+    max-width: 420px
+    @include text-shortener
+
+  &--active-parent-select
+    min-width: 320px
+
+  @media screen and (max-width: 1248px)
+    margin-top: 0

frontend/src/global_styles/layout/_breadcrumb.sass

@@ -27,18 +27,7 @@
 //++
 
 #breadcrumb
+  @include global-breadcrumb-styles
+  min-height: var(--breadcrumb-height)
   li
     white-space: nowrap
-
-ul.op-breadcrumb
-  margin: 0 0 0 0
-  padding: 0
-  list-style: none
-  list-style-position: outside
-  // width: 10000px
-  height: var(--breadcrumb-height)
-  line-height: var(--breadcrumb-height)
-
-// Hide projects in normal mode
-.op-breadcrumb .op-breadcrumb-project-element
-  display: none

frontend/src/global_styles/layout/work_packages/_breadcrumb.sass

@@ -1,49 +0,0 @@
-%breadcrumb--default-font
-  @include default-font(var(--breadcrumb-font-color), var(--breadcrumb-font-size), bold)
-
-#breadcrumb,
-.op-wp-breadcrumb
-  margin-top: 10px
-  height: initial
-  display: none
-  @include default-transition
-  height: var(--breadcrumb-height)
-  overflow: hidden
-  background: none repeat scroll 0 0
-  background-color: var(--body-background)
-  border: none
-  width: auto
-  position: relative
-  &.nosidebar
-    // 7px of the icon to align breadcrumb with content
-    margin-left: -7px
-    ul
-      margin: 0
-
-  a
-    font-size: 12px
-    color: var(--content-link-color)
-    font-weight: normal
-
-  ul.op-breadcrumb
-    height: initial
-    li
-        float: left
-        margin: 0 5px 0 0
-        padding: 0
-        line-height: 20px 
-
-  .op-wp-breadcrumb--ellipsed
-    max-width: 420px
-    @include text-shortener
-
-  li
-    @extend %breadcrumb--default-font
-    // TODO was lighten($breadcrumb-font-color, 20)
-    color: #666
-    list-style-type: none
-
-  &.-show
-    display: block
-
-

frontend/src/global_styles/layout/work_packages/_index.sass

@@ -4,5 +4,3 @@
 @import full_view
 @import mobile
 @import print
-@import breadcrumb
-

frontend/src/global_styles/openproject/_mixins.sass

@@ -222,3 +222,27 @@ $scrollbar-size: 10px
   border: 0
   font: inherit
   text-align: inherit
+
+@mixin global-breadcrumb-styles
+  margin-top: 10px
+  display: none
+  @include default-transition
+  overflow: hidden
+  width: auto
+
+  ul.op-breadcrumb
+    height: initial
+    margin: 0
+    padding: 0
+    li
+      @include default-font(var(--breadcrumb-font-color), var(--breadcrumb-font-size), normal)
+      list-style-type: none
+      float: left
+      margin: 0 5px 0 0
+      padding: 0
+      line-height: 20px
+      max-width: 100%
+      @include text-shortener
+
+  &.-show
+    display: block

frontend/src/global_styles/openproject/_variables.scss

@@ -112,7 +112,7 @@
   --breadcrumb-border-color: #E7E7E7;
   --breadcrumb-font-size: 12px;
   --breadcrumb-highlighted-font-size: 14px;
-  --breadcrumb-font-color: var(--body-font-color);
+  --breadcrumb-font-color: lighten(var(--body-font-color), 20);
   --content-default-border-color: #EAEAEA;
   --content-default-border-width: 1px;
   --content-link-hover-active-color: var(--primary-color-dark);