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;