Restyle of custom fields

app/partials/custom-attributes/custom-attributes-values.jade

@@ -7,8 +7,10 @@ section.duty-custom-fields(ng-show="ctrl.customAttributes.length")
             ng-click="toggleCollapse()"
         )
             tg-svg(svg-icon="icon-arrow-down")
+
     .custom-fields-body(
         ng-show="!collapsed"
+        ng-class="{'collapse-fields': ctrl.customAttributes.length > 6}"
     )
         .custom-attribute(
             ng-repeat="attr in ctrl.customAttributes"

app/styles/modules/common/custom-fields.scss

@@ -24,7 +24,7 @@
         border-bottom: 1px solid $whitish;
         display: flex;
         justify-content: flex-start;
-        padding: 1rem;
+        padding: .7rem;
         &:hover {
             .custom-field-options {
                 opacity: 1;
@@ -85,3 +85,40 @@
         }
     }
 }
+
+.custom-fields-body {
+    display: flex;
+    flex-wrap: wrap;
+    &.collapse-fields {
+        .custom-attribute {
+            flex-basis: 50%;
+            @include breakpoint(laptop) {
+                flex-basis: 100%;
+                &:nth-child(even) {
+                    padding: 0;
+                }
+                &:nth-child(odd) {
+                    padding: 0;
+                }
+            }
+            &:nth-child(even) {
+                padding: 0 0 0 2rem;
+            }
+            &:nth-child(odd) {
+                padding: 0 2rem 0 0;
+            }
+        }
+    }
+    .custom-attribute {
+        flex-basis: 100%;
+        &:nth-child(even) {
+            padding: 0;
+        }
+        &:nth-child(odd) {
+            padding: 0;
+        }
+    }
+    .custom-field-single {
+        height: 100%;
+    }
+}