1 files changed, 36 insertions, 39 deletions

diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
index bb019a768b..a525021b04 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -1,5 +1,5 @@
-
 @import './../../../../assets/styles/variables.less';
+@smaller-screen: ~"only screen and (max-width: 1580px)";
 
 :host /deep/ input { width:100%;}
 
@@ -10,40 +10,31 @@
     height:100%;
     text-align:left;
 
+
     .inner-cell-div{
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
         height: 20px;
     }
-    
-    .table-header, .table-row {
+
+    .table-header {
         display: flex;
         flex-direction:row;
         flex: 0 0 auto;
-    }
-
-    .table-header {
         font-weight:bold;
         border-top: #d2d2d2 solid 1px;
-        background-color: #eaeaea;
+        background-color: #f2f2f2;
 
-        .valueCol {
-            justify-content: flex-start;
-            padding: 5px;
+        .table-cell {
+            color:#191919;
+            font-size:14px;
         }
     }
 
     .table-rows-header {
-        font-size:16px;
-        flex:1;
         border: #d2d2d2 solid 1px;
         border-top:none;
-        padding: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: @tlv_color_v;
     }
 
     .table-body {
@@ -63,35 +54,37 @@
             background-color: #e6f6fb;
             color:  #009fdb;
         }
-    }
+        .table-row {
+            display: flex;
+            flex-direction:row;
+            flex: 0 0 auto;
 
+            &:hover:not(.selected){
+                background-color:#f8f8f8; cursor:pointer;
+            }
 
-    .table-row {
-        &:hover {
-             background-color:#f8f8f8; cursor:pointer;
-        }
+            .selected-row {
+                background-color:#e6f6fb;
+            }
 
-        &:last-child {
-            flex: 1 0 auto;
-        }
-        .selected-row {
-            background-color:#e6f6fb;
+            .table-cell.valueCol {
+                padding:0px;
+
+            }
         }
     }
-    .cut-inner-long-text{
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-     .table-cell {
+    .table-cell {
         font-size:13px;
         flex:1;
         border: #d2d2d2 solid 1px;
         border-right:none;
         border-top:none;
-        padding: 5px;
+        padding:10px;
         text-overflow: ellipsis;
         white-space: nowrap;
+        overflow:hidden;
         display: flex;
+        min-height:40px;
 
         &:last-child {
             border-right:#d2d2d2 solid 1px;
@@ -101,6 +94,7 @@
             max-width:300px;
             display: flex;
             justify-content: space-between;
+            @media @smaller-screen { flex: 0 0 25%;}
 
             .property-name {
                 flex: 1;
@@ -116,25 +110,25 @@
             }
 
             /deep/ .checkbox-container {
-                margin-right: 5px;
+                margin-right: 10px;
             }
         }
         &.col2 {
             flex: 0 0 150px;
             max-width:150px;
+            @media @smaller-screen { flex: 0 0 20%;}
         }
 
         &.col3 {
             flex:0 0 120px;
             max-width:120px;
+            @media @smaller-screen { flex: 0 0 15%;}
         }
 
         &.valueCol {
-            flex: 1;
-            min-width: 350px;
+            flex: 1 0 350px;
             display: flex;
-            justify-content: flex-end;
-            padding: 0px;
+            @media @smaller-screen { flex: 1 0 40%;}
         }
     }
 
@@ -146,6 +140,9 @@
     
     dynamic-property {
         width:100%;
+        &:last-child /deep/ .dynamic-property-row {
+            border-bottom:none;
+        }
     }
 
-}
+}
\ No newline at end of file