diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 99b603fab4116e423873e891420d4eb31dff1654..1f14282294f0baae225567605a07175141e2835c 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -265,8 +265,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;
 
@@ -278,14 +281,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;
@@ -296,7 +297,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 b05ad3c180a52980631ad883f4b5e7a48ede798d..e3121c2531c8d2886011b047dde2e0b1c888c454 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