diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index b074b7d2dd3e1367cd808c501370b960f72a3b32..9efccef8c025e4f1a5d0c752f4e7665645b6ce56 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -285,8 +285,11 @@ $consum_ribbon_width: calc(100% - 58px);
         .cw-ribbon-breadcrumb {
             font-size: 1.25em;
             line-height: 1.5em;
+            margin-right: 1em;
+            min-width: 0;
 
             ul {
+                display: flex;
                 list-style: none;
                 padding-left: 0;
 
@@ -298,14 +301,12 @@ $consum_ribbon_width: calc(100% - 58px);
                 }
 
                 .cw-ribbon-breadcrumb-item {
-                    display: inline-flex;
-
-                    span {
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        max-width: 12em;
-                    }
+                    display: inline;
+                    flex-shrink: 100000;
+                    min-width: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
 
                     a {
                         color: $base-color;
@@ -316,7 +317,7 @@ $consum_ribbon_width: calc(100% - 58px);
                     }
 
                     &.cw-ribbon-breadcrumb-item-current {
-                        cursor: default;
+                        flex-shrink: 1;
                     }
                 }
             }
diff --git a/resources/vue/components/courseware/CoursewareStructuralElement.vue b/resources/vue/components/courseware/CoursewareStructuralElement.vue
index b01ff6b7067f437bdf401b1fa128575010505f08..ec340121dad6dc76028bb3c77728a24f7c19971d 100755
--- a/resources/vue/components/courseware/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/CoursewareStructuralElement.vue
@@ -26,9 +26,7 @@
                                 class="cw-ribbon-breadcrumb-item"
                             >
                                 <span>
-                                    <router-link :to="'/structural_element/' + ancestor.id">
-                                        {{ ancestor.attributes.title || "–" }}
-                                    </router-link>
+                                    <router-link :to="'/structural_element/' + ancestor.id">{{ ancestor.attributes.title || "–" }}</router-link>
                                 </span>
                             </li>
                             <li