fix(admin-ui): Fix styling for very long breadcrumbs

vendure-ecommerce · Jun 13, 2023 · 44c2c88 · 44c2c88
1 parent 163db15
commit 44c2c88
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html b/packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html
@@ -35,7 +35,7 @@
                     <vdr-breadcrumb></vdr-breadcrumb>
                 </div>
                 <div class="universal-search flex-spacer"></div>
-                <div class="mr-1">
+                <div class="mx-1">
                     <vdr-alerts></vdr-alerts>
                 </div>
                 <div>

diff --git a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.html b/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.html
@@ -1,6 +1,6 @@
 <nav role="navigation">
     <ul class="breadcrumbs">
-        <li *ngFor="let breadcrumb of breadcrumbs$ | async; let isLast = last">
+        <li *ngFor="let breadcrumb of breadcrumbs$ | async; let isLast = last" [title]="breadcrumb.label">
             <a [routerLink]="breadcrumb.link" *ngIf="!isLast">{{ breadcrumb.label | translate }}</a>
             <ng-container *ngIf="!isLast"
                 ><clr-icon shape="caret right" class="color-weight-400 mx-1"></clr-icon

diff --git a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss b/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss
@@ -8,11 +8,12 @@
 .breadcrumbs {
     list-style-type: none;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     overflow-x: auto;
     max-width: 100vw;
     line-height: 100%;
-    height: 40px;
+    min-height: 40px;
     padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);
     font-size: var(--font-size-sm);
     background-color: var(--color-page-header-item-bg);
@@ -27,6 +28,10 @@
         &:last-child {
             font-weight: 600;
         }
+
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }
 .breadcrumbs:not(.mobile) {

diff --git a/packages/admin-ui/src/lib/core/src/shared/components/chip/chip.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/chip/chip.component.scss
@@ -2,6 +2,7 @@
 
 :host {
     display: inline-block;
+    overflow: hidden;
 }
 
 .wrapper {
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     :host {
         display: inline-block;
+        overflow: hidden;
     }
     .wrapper {
@@ Expand Down @@