From 96bd4d81ab87dfb015dfbf48d337fed5e86e0baa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?= Date: Fri, 11 Feb 2022 19:29:49 +0100 Subject: [PATCH] Fix shrinking of last breadcrumb for narraow width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Raimund Schlüßler --- src/components/Breadcrumb/Breadcrumb.vue | 14 ++++++++++++++ src/components/Breadcrumbs/Breadcrumbs.vue | 12 +++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/Breadcrumb/Breadcrumb.vue b/src/components/Breadcrumb/Breadcrumb.vue index c784c64c6c..aadc85439b 100644 --- a/src/components/Breadcrumb/Breadcrumb.vue +++ b/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; diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/src/components/Breadcrumbs/Breadcrumbs.vue index 28ba4dd9e5..5f6848e2ae 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.vue +++ b/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;