From 11ae8ec845a8659e65cb63748c2a4e9d63bb6af3 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 8 Sep 2021 11:31:56 +0300
Subject: [PATCH] UI: Improvement table columns assigment

---
 .../import-export/table-columns-assignment.component.html  | 6 +++---
 .../import-export/table-columns-assignment.component.scss  | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
index 41a4933355..568a04c282 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
@@ -23,13 +23,13 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="sampleData">
-    <mat-header-cell *matHeaderCellDef style="flex: 0 0 30%;" class="mat-column-sampleData"> {{ 'import.column-example' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef class="mat-column-sampleData"> {{ 'import.column-example' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       {{column.sampleData}}
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef style="flex: 0 0 40%" class="mat-column-type"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef class="mat-column-type"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-select [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
         <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
@@ -44,7 +44,7 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="key">
-    <mat-header-cell *matHeaderCellDef style="flex: 0 0 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef class="mat-column-key"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-form-field floatLabel="always" hideRequiredMarker
                       *ngIf="isColumnTypeDiffers(column.type)">
diff --git a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.scss b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.scss
index 787d149252..63a1d7a930 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.scss
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.scss
@@ -14,14 +14,21 @@
  * limitations under the License.
  */
 :host {
+  overflow-x: auto;
+
   .mat-column-order {
     flex: 0 0 40px;
   }
   .mat-column-sampleData {
     flex: 0 0 120px;
     min-width: 120px;
+    max-width: 230px;
   }
   .mat-column-type {
+    flex: 0 0 180px;
+    min-width: 180px;
+  }
+  .mat-column-key {
     flex: 0 0 120px;
     min-width: 120px;
   }