Allow last crumb to shrink if all crumbs collapsed

Signed-off-by: Raimund Schlüßler <[email protected]>

src/components/Breadcrumb/Breadcrumb.vue

@@ -220,6 +220,14 @@ export default {
 	height: $clickable-area;
 	padding: 0;
 
+	&:last-child {
+		max-width: 210px;
+
+		a {
+			flex-shrink: 1;
+		}
+	}
+
 	&::before {
 		display: flex;
 		align-items: center;
@@ -236,6 +244,10 @@ export default {
 		padding-right: 2px;
 	}
 
+	> a, > span {
+		max-width: 100%;
+	}
+
 	a {
 		align-items: center;
 		display: inline-flex;

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -502,7 +502,7 @@ export default {
 			: []
 		this.addCrumbs(crumbs, crumbs2, crumbs1.length)
 
-		return createElement('div', { class: 'breadcrumb', ref: 'container' }, crumbs)
+		return createElement('div', { class: ['breadcrumb', { collapsed: (this.hiddenCrumbs.length === breadcrumbs.length - 2) }], ref: 'container' }, crumbs)
 	},
 }
 </script>
@@ -512,6 +512,11 @@ export default {
 	width: 100%;
 	flex-grow: 1;
 
+	&.collapsed  .crumb:last-child {
+		min-width: 100px;
+		flex-shrink: 1;
+	}
+
 	.crumb--hovered{
 		background-color: var(--color-primary-light);
 	}