fix(sidebar): resize bugs

src/app/security-group/sg-sidebar/security-group-sidebar.component.html

@@ -8,7 +8,12 @@ <h4 class="details-header">{{ entity.name }}</h4>
     </button>
   </div>
 
-  <nav mat-tab-nav-bar *ngIf="!isPredefinedTemplate">
+  <nav
+    #tabs
+    [csSidebarTabNav]="tabs"
+    mat-tab-nav-bar
+    *ngIf="!isPredefinedTemplate"
+  >
     <a
       matTabLink
       [routerLink]="['./sg']"

src/app/security-group/sg-sidebar/security-group-sidebar.component.scss

@@ -11,9 +11,10 @@
 }
 
 :host /deep/ .mat-expansion-panel-content {
-  color: rgba(0, 0, 0, 0.54)
+  color: rgba(0, 0, 0, 0.54);
 }
 
 :host /deep/ .mat-tab-link {
-  min-width: 140px !important;
+  min-width: 0 !important;
+  flex: 1 1 auto;
 }

src/app/shared/components/sidebar/sidebar-container/sidebar-container.component.scss

@@ -29,18 +29,6 @@
   margin: 0 5px;
 }
 
-.sidebar /deep/ .grid {
-  .row {
-    display: flex;
-    flex-flow: row wrap;
-
-    & > div {
-      width: 50%;
-      padding: 2px;
-    }
-  }
-}
-
 .sidebar /deep/ button {
   transition: transform 0.3s;
 }
@@ -50,7 +38,6 @@
 }
 
 .sidebar /deep/ mat-card-content {
-  width: 100%;
   line-height: 18px;
 
   & .mat-card-content-container {
@@ -59,10 +46,6 @@
   }
 }
 
-.details-header {
-  width: 340px;
-}
-
 .sidebar /deep/ .collapsed-panel .row,
 .sidebar /deep/ .expanded-panel .row {
   display: flex;

src/app/template/template-sidebar/base-template-sidebar.component.html

@@ -1,9 +1,11 @@
 <div *ngIf="entity">
   <div class="title-container">
-    <cs-template-os-icon-container
-      [template]="entity"
-    ></cs-template-os-icon-container>
-    <h4 class="details-header">{{ entity.name }}</h4>
+    <div class="title-container">
+      <cs-template-os-icon-container
+        [template]="entity"
+      ></cs-template-os-icon-container>
+      <h4 class="details-header">{{ entity.name }}</h4>
+    </div>
     <cs-template-actions-sidebar-container
       *ngIf="isSelf"
       [template]="entity"

src/app/template/template-sidebar/base-template-sidebar.component.scss

@@ -21,7 +21,6 @@ mat-icon {
 
 .title-container {
   display: flex;
-  justify-content: start;
-  width: 90%;
+  justify-content: space-between;
   align-items: center;
 }

src/app/vm/vm-sidebar/storage-detail/volumes/volume-details/volume-details.component.html

@@ -19,13 +19,12 @@
       <div>{{ 'VM_PAGE.STORAGE_DETAILS.VOLUME_DETAILS.STORAGE_TYPE' | translate }}</div>
       <div>{{ storageTypeTranslationToken | translate }}</div>
     </div>
-    <div class="row"
-         *ngIf="diskOffering?.name"
-         [matTooltip]="diskOffering?.displaytext"
-         matTooltipPosition="above"
+    <div
+      class="row"
+      *ngIf="diskOffering?.name"
     >
       <div>{{ 'VM_PAGE.STORAGE_DETAILS.VOLUME_DETAILS.DISK_OFFERING' | translate }}</div>
-      <div>{{ diskOffering.name }}</div>
+      <div [matTooltip]="diskOffering?.displaytext">{{ diskOffering.name }}</div>
     </div>
   </div>
 

src/app/vm/vm-sidebar/vm-detail/detail/vm-detail.component.scss

@@ -12,7 +12,6 @@
 .ellipsis-overflow {
   user-select: text !important;
   display: inline-block;
-  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/style/app.scss

@@ -193,9 +193,10 @@ mat-card.custom-card {
   .row {
     display: flex;
     flex-flow: row wrap;
+    justify-content: space-between;
 
     & > div {
-      width: 50%;
+      max-width: 50%;
       padding: 2px 2px 2px 0 !important;
     }
 
@@ -342,10 +343,10 @@ mat-card-actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  overflow: hidden;
 }
 
 .details-header {
-  width: 340px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;