Fix datagrid text overflow issue

solve the problem of overlapping the line due to newly created inline characters
(should used for 1.9.x)
Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/lib/src/label/label.component.scss

@@ -16,6 +16,10 @@
           }
       }    
   }
+  hbr-label-piece {
+    max-width: 100%;
+    display: flex;
+  }
 }
 
 

src/portal/lib/src/replication/replication.component.html

@@ -27,10 +27,12 @@
         <div class="row flex-items-xs-between flex-items-xs-bottom fiter-task">
           <div class="execution-select">
             <div class="select filter-tag" [hidden]="!isOpenFilterTag">
-              <select (change)="doFilterJob($event)">
+              <clr-select-container>
-                <option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
+                  <select clrSelect (change)="doFilterJob($event)" >
-                <option value="status">{{'REPLICATION.STATUS' | translate}}</option>
+                      <option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
-              </select>
+                      <option value="status">{{'REPLICATION.STATUS' | translate}}</option>
+                  </select>
+              </clr-select-container>
             </div>
             <hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
               filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'

src/portal/lib/src/replication/replication.component.scss

@@ -22,6 +22,9 @@
   .filter-tag {
       float: left;
       margin-top: 8px;
+      .clr-form-control {
+        margin-top: 0;
+      }
   }
   .refresh-btn {
       cursor: pointer;
@@ -79,4 +82,9 @@ clr-datagrid {
   ::ng-deep .datagrid-table {
     position: static;
   }
-}
+}
+
+.flex-items-xs-between {
+  display: flex;
+  justify-content: space-between;
+}

src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.scss

@@ -67,8 +67,7 @@ $size60:60px;
 }
 
 .size-24 {
-    width:$size24;
+    width: 60px;
-    height:$size24;
 }
 
 .size-60 {

src/portal/src/app/project/tag-retention/tag-retention.component.scss

@@ -81,3 +81,12 @@
   flex: 0 0 8.3%;
   padding-left: 0.5rem;
 }
+::ng-deep {
+  .datagrid-row-flex {
+    .datagrid-row-detail {
+      .datagrid-cell {
+        padding: 11px 12px;
+      }
+    }
+  }
+}

src/portal/src/global.scss

@@ -292,3 +292,35 @@
 .position-relative {
   position: relative;
 }
+clr-datagrid {
+  clr-dg-row {
+    .datagrid-scrolling-cells {
+      align-items: center;
+      width: 100%;
+    }
+    clr-dg-cell {
+      overflow-wrap: break-word;
+    }
+    .datagrid-expandable-caret-icon {
+      margin-top: 0;
+    }
+  }
+  .datagrid-select {
+    display: flex;
+    align-items: center;
+    clr-checkbox-wrapper,
+    clr-radio-wrapper {
+      .clr-control-label {
+        min-height: 0.8rem;
+      }
+    }
+  }
+  .datagrid-table {
+    .datagrid-column {
+      .datagrid-column-title,
+      clr-dg-filter {
+        align-self: center;
+      }
+    }
+  }
+}