Card details layout improvements

client/components/cards/cardDetails.jade

@@ -42,8 +42,24 @@ template(name="cardDetails")
       else
         p.warning {{_ 'card-archived'}}
 
-    .card-details-items
+    .card-details-items 
+      if currentBoard.allowsLabels
+        .card-details-item.card-details-item-labels
+          h3
+            i.fa.fa-tags
+            card-details-item-title {{_ 'labels'}}
+          a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
+            each labels
+              span.card-label(class="card-label-{{color}}" title=name)
+                +viewer
+                  = name
+          if canModifyCard
+            unless currentUser.isWorker
+              a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
+                i.fa.fa-plus
+      
       if currentBoard.allowsReceivedDate
+        hr
         .card-details-item.card-details-item-received
           h3
             i.fa.fa-sign-out
@@ -97,6 +113,7 @@ template(name="cardDetails")
 
       //.card-details-items
       if currentBoard.allowsMembers
+        hr
         .card-details-item.card-details-item-members
           h3
             i.fa.fa-users
@@ -126,36 +143,15 @@ template(name="cardDetails")
               a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
                 i.fa.fa-plus
 
-      if currentBoard.allowsLabels
-        .card-details-item.card-details-item-labels
-          h3
-            i.fa.fa-tags
-            card-details-item-title {{_ 'labels'}}
-          a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
-            each labels
-              span.card-label(class="card-label-{{color}}" title=name)
-                +viewer
-                  = name
-          if canModifyCard
-            unless currentUser.isWorker
-              a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
-                i.fa.fa-plus
-
-      //.card-details-items
-      each customFieldsWD
-        .card-details-item.card-details-item-customfield
-          h3.card-details-item-title
-            +viewer
-              = definition.name
-          +cardCustomField
-
       //.card-details-items
       if getSpentTime
         .card-details-item.card-details-item-spent
           if getIsOvertime
-            h3.card-details-item-title {{_ 'overtime-hours'}}
+            h3
+              card-details-item-title {{_ 'overtime-hours'}}
           else
-            h3.card-details-item-title {{_ 'spent-time-hours'}}
+            h3
+              card-details-item-title {{_ 'spent-time-hours'}}
           +cardSpentTime
 
       //.card-details-items
@@ -199,6 +195,17 @@ template(name="cardDetails")
             +viewer
               = getAssignedBy
 
+      //.card-details-items
+      if customFieldsWD
+        hr
+        each customFieldsWD
+          .card-details-item.card-details-item-customfield
+            h3
+              card-details-item-title
+                i.fa.fa-list-alt
+                = definition.name
+            +cardCustomField
+
     if getVoteQuestion
       hr
       .vote-title

client/components/cards/cardDetails.styl

@@ -89,7 +89,7 @@ avatar-radius = 50%
 .card-details
   padding: 0
   flex-shrink: 0
-  flex-basis: 510px
+  flex-basis: 600px
   will-change: flex-basis
   overflow-y: scroll
   overflow-x: hidden
@@ -198,22 +198,31 @@ avatar-radius = 50%
       margin-right: 0.5em
       &:last-child
         margin-right: 0
-      &.card-details-item-labels,
+      &.card-details-item-labels
+        display: block
+        word-wrap: break-word
+        max-width: 95%
+        flex-grow: 1
       &.card-details-item-members,
       &.card-details-item-assignees,
+      &.card-details-item-customfield,
+      &.card-details-item-name
+        display: block
+        word-wrap: break-word
+        max-width: 36%
+        flex-grow: 1
       &.card-details-item-received,
       &.card-details-item-start,
       &.card-details-item-due,
-      &.card-details-item-end,
-      &.card-details-item-customfield,
-      &.card-details-item-name
+      &.card-details-item-end
         display: block
         word-wrap: break-word
-        max-width: 48%
+        max-width: 28%
         flex-grow: 1
 
   .card-details-item-title
     font-size: 16px
+    font-weight: bold
     color: #000
 
   .card-label