From 0de882ffa6481099cccfdc9a9e0ec077e41d7c61 Mon Sep 17 00:00:00 2001
From: Yogi_Wang <yawang@vmware.com>
Date: Fri, 15 Nov 2019 15:25:52 +0800
Subject: [PATCH] Fix datagrid text overflow issue --1.10new feature change
 Signed-off-by: Yogi_Wang <yawang@vmware.com>

---
 src/portal/lib/src/tag/tag.component.html     |  6 ++---
 src/portal/lib/src/tag/tag.component.scss     | 24 +++++++++++--------
 .../scanner/config-scanner.component.html     |  6 ++---
 .../scanner/config-scanner.component.scss     |  4 ----
 .../project/scanner/scanner.component.html    |  2 +-
 .../project/scanner/scanner.component.scss    |  4 ----
 .../tag-retention.component.scss              |  2 +-
 7 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/portal/lib/src/tag/tag.component.html b/src/portal/lib/src/tag/tag.component.html
index 88449dae5..c06fa3e30 100644
--- a/src/portal/lib/src/tag/tag.component.html
+++ b/src/portal/lib/src/tag/tag.component.html
@@ -92,9 +92,9 @@
             <clr-dg-placeholder>{{'TAG.PLACEHOLDER' | translate }}</clr-dg-placeholder>
             <clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'>
                 <clr-dg-cell class="truncated flex-max-width">
-                    <div class="cell">
-                        <a href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
-                        <span *ngIf="t.immutable" class="label label-info ml-1">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
+                    <div class="cell white-normal" [class.immutable]="t.immutable">
+                        <a href="javascript:void(0)" class="max-width-100" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
+                        <span *ngIf="t.immutable" class="label label-info ml-5">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
                     </div>
                 </clr-dg-cell>
                 <clr-dg-cell>
diff --git a/src/portal/lib/src/tag/tag.component.scss b/src/portal/lib/src/tag/tag.component.scss
index 848107c7f..13ffa5616 100644
--- a/src/portal/lib/src/tag/tag.component.scss
+++ b/src/portal/lib/src/tag/tag.component.scss
@@ -225,7 +225,8 @@ hbr-image-name-input {
 
 .datagrid-top {
   .flex-max-width {
-    max-width: 220px
+    max-width: 220px;
+    min-width: 130px;
   }
 }
 
@@ -252,13 +253,16 @@ clr-datagrid {
   width: 100%;
   height: 100%;
 }
-// todo :can be improved
-:host::ng-deep clr-dg-row {
-  .datagrid-select {
-    .clr-checkbox-wrapper {
-      input[type=checkbox] + label {
-        margin: 0;
-      }
-    }
-  }
+
+.ml-5 {
+  margin-left: 8px !important;
 }
+.immutable {
+  padding-right: 80px;
+}
+.white-normal {
+  white-space: normal;
+}
+.max-width-100 {
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/src/portal/src/app/config/scanner/config-scanner.component.html b/src/portal/src/app/config/scanner/config-scanner.component.html
index 9e5675fe6..fbf434789 100644
--- a/src/portal/src/app/config/scanner/config-scanner.component.html
+++ b/src/portal/src/app/config/scanner/config-scanner.component.html
@@ -61,15 +61,15 @@
             <clr-dg-row *clrDgItems="let scanner of scanners" [clrDgItem]="scanner">
                 <clr-dg-cell class="position-relative">
                     <span>{{scanner.name}}</span>
-                    <span *ngIf="scanner.is_default" class="label label-info ml-1 label-in-cell">{{'SCANNER.DEFAULT' | translate}}</span>
+                    <span *ngIf="scanner.is_default" class="label label-info ml-1">{{'SCANNER.DEFAULT' | translate}}</span>
                 </clr-dg-cell>
                 <clr-dg-cell>{{scanner.url}}</clr-dg-cell>
                 <clr-dg-cell class="position-relative">
                     <span *ngIf="scanner.loadingMetadata;else elseBlockLoading" class="spinner spinner-inline ml-2"></span>
                     <ng-template #elseBlockLoading>
-                        <span *ngIf="scanner.metadata;else elseBlock" class="label label-success label-in-cell">{{'SCANNER.HEALTHY' | translate}}</span>
+                        <span *ngIf="scanner.metadata;else elseBlock" class="label label-success">{{'SCANNER.HEALTHY' | translate}}</span>
                         <ng-template #elseBlock>
-                            <span class="label label-danger label-in-cell">{{'SCANNER.UNHEALTHY' | translate}}</span>
+                            <span class="label label-danger">{{'SCANNER.UNHEALTHY' | translate}}</span>
                         </ng-template>
                     </ng-template>
                 </clr-dg-cell>
diff --git a/src/portal/src/app/config/scanner/config-scanner.component.scss b/src/portal/src/app/config/scanner/config-scanner.component.scss
index da97fcebe..f6c8b3ff9 100644
--- a/src/portal/src/app/config/scanner/config-scanner.component.scss
+++ b/src/portal/src/app/config/scanner/config-scanner.component.scss
@@ -31,7 +31,3 @@
 .margin-left-10 {
   margin-left: 10px;
 }
-.label-in-cell {
-  position: absolute;
-  margin-top: -3px;
-}
diff --git a/src/portal/src/app/project/scanner/scanner.component.html b/src/portal/src/app/project/scanner/scanner.component.html
index 3f9753e68..3292c5abc 100644
--- a/src/portal/src/app/project/scanner/scanner.component.html
+++ b/src/portal/src/app/project/scanner/scanner.component.html
@@ -76,7 +76,7 @@
                 <clr-dg-cell>{{scanner.name}}</clr-dg-cell>
                 <clr-dg-cell>{{scanner.url}}</clr-dg-cell>
                 <clr-dg-cell class="position-relative">
-                    <span *ngIf="scanner.is_default" class="label label-info label-in-cell">{{scanner.is_default}}</span>
+                    <span *ngIf="scanner.is_default" class="label label-info">{{scanner.is_default}}</span>
                     <span *ngIf="!scanner.is_default">{{scanner.is_default}}</span>
                 </clr-dg-cell>
                 <clr-dg-cell>{{scanner.description}}</clr-dg-cell>
diff --git a/src/portal/src/app/project/scanner/scanner.component.scss b/src/portal/src/app/project/scanner/scanner.component.scss
index b0b57b2c6..c2f5a0d72 100644
--- a/src/portal/src/app/project/scanner/scanner.component.scss
+++ b/src/portal/src/app/project/scanner/scanner.component.scss
@@ -21,7 +21,3 @@
 .clr-form-control {
   margin-top: 0.75rem !important;
 }
-.label-in-cell {
-  position: absolute;
-  margin-top: -3px;
-}
diff --git a/src/portal/src/app/project/tag-retention/tag-retention.component.scss b/src/portal/src/app/project/tag-retention/tag-retention.component.scss
index e15bc73d5..329532b1a 100644
--- a/src/portal/src/app/project/tag-retention/tag-retention.component.scss
+++ b/src/portal/src/app/project/tag-retention/tag-retention.component.scss
@@ -81,7 +81,7 @@
   flex: 0 0 8.3%;
   padding-left: 0.5rem;
 }
-::ng-deep {
+:host::ng-deep {
   .datagrid-row-flex {
     .datagrid-row-detail {
       .datagrid-cell {