Dynamically truncate breadcrumbs37920-improve-breadcrumbs-clipping

1 files changed, 14 insertions, 3 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ea5d8ba028c..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,12 +415,20 @@
     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;
     }
   }
 }
@@ -432,7 +443,7 @@
 
 .breadcrumbs-list-angle {
   position: absolute;
-  right: -12px;
+  right: 7px;
   top: 50%;
   color: $gl-text-color-tertiary;
   transform: translateY(-50%);