Merge pull request #2492 from nextcloud/fix/noid/breadcrumbs-last-child

Fix shrinking of last breadcrumb for narrow width

src/components/Breadcrumb/Breadcrumb.vue

@@ -296,8 +296,22 @@ export default {
  // Adjust action item appearance for crumbs with actions
  // to match other crumbs
  &::v-deep .action-item {
+ // Adjustments necessary to correctly shrink on small screens
+ max-width: 100%;
+ .trigger {
+ max-width: 100%;
+ }
+
  &__menutoggle--with-title,
  &--single--with-title {
+ // Adjustments necessary to correctly shrink on small screens
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+ display: inline-block;
+
  background-color: unset;
  border: none;
 

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -584,11 +584,21 @@ export default {
  flex-grow: 1;
  display: inline-flex;
 
- &--collapsed .crumb:last-child {
+ &--collapsed .vue-crumb:last-child {
  min-width: 100px;
  flex-shrink: 1;
  }
 
+ & #{&}__crumbs {
+ flex-shrink: 1;
+ max-width: 100%;
+ /**
+ * This value is given by the min-width of the last crumb (100px) plus
+ * two times the width of a crumb with an icon (first crumb and hidden crumbs actions).
+ */
+ min-width: 228px;
+ }
+
  & #{&}__crumbs,
  & #{&}__actions {
  display: inline-flex;