Merge pull request #2439 from mklanjsek/breadcrumb-layout-fix

Fixed breadcrumbs breaking to 2nd row
vmware-archive · May 11, 2021 · b716185 · b716185
2 parents bd0c4c8 + 3558105
commit b716185
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/web/src/app/modules/shared/components/presentation/tabs/tabs.component.html b/web/src/app/modules/shared/components/presentation/tabs/tabs.component.html
@@ -1,12 +1,8 @@
-<div class="clr-row clr-align-items-center clr-justify-content-between">
- <div class="clr-col-6">
- <app-breadcrumb [path]="title"> </app-breadcrumb>
- </div>
- <div class="clr-col-6">
- <div *ngIf="titleComponents?.length > 0" class="title-container">
- <div *ngFor="let component of titleComponents; trackBy: trackByIndex" class="item">
- <app-view-container [view]="component"></app-view-container>
- </div>
+<div class="breadcrumb-row">
+ <app-breadcrumb [path]="title"> </app-breadcrumb>
+ <div *ngIf="titleComponents?.length > 0" class="title-container">
+ <div *ngFor="let component of titleComponents; trackBy: trackByIndex" class="item">
+ <app-view-container [view]="component"></app-view-container>
  </div>
  </div>
 </div>

diff --git a/web/src/app/modules/shared/components/presentation/tabs/tabs.component.scss b/web/src/app/modules/shared/components/presentation/tabs/tabs.component.scss
@@ -6,10 +6,17 @@
  outline: none;
 }
 
+.breadcrumb-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+}
+
 .title-container {
- float: right;
  display: flex;
  justify-content: space-between;
+ flex-wrap: wrap;
+ max-width: 10rem;
+ margin-left: 0.8rem;
 
  .item {
  margin: 0 5px;