Merge branch '37920-improve-breadcrumbs-clipping' into 'master'

Improve breadcrumbs clipping

Closes #37920

See merge request gitlab-org/gitlab-ce!15164

1 files changed, 18 insertions, 4 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 1cdfa904374..f0139b5f33a 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -401,10 +401,13 @@
 .breadcrumbs-list {
   display: -webkit-flex;
   display: flex;
-  flex-wrap: wrap;
   margin-bottom: 0;
   line-height: 16px;
 
+  @media (max-width: $screen-xs-max) {
+    flex-wrap: wrap;
+  }
+
   > li {
     display: flex;
     align-items: center;
@@ -412,24 +415,35 @@
     padding: 2px 0;
 
     &:not(:last-child) {
-      margin-right: 20px;
+      padding-right: 20px;
+
+      &:not(.dropdown) {
+        overflow: hidden;
+      }
     }
 
     > a {
       font-size: 12px;
       color: currentColor;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 0 1 auto;
     }
   }
 }
 
 .breadcrumb-item-text {
-  @include str-truncated(128px);
   text-decoration: inherit;
+
+  @media (max-width: $screen-xs-max) {
+    @include str-truncated(128px);
+  }
 }
 
 .breadcrumbs-list-angle {
   position: absolute;
-  right: -12px;
+  right: 7px;
   top: 50%;
   color: $gl-text-color-tertiary;
   transform: translateY(-50%);