Checklist-Items, Drag-Drop Handle now at the left side

- Drag handle is not visible at long checklists, even with:
  padding-right: 20px
  Depending of all the screen sizes out there this is the most secure
  way to get around this and the drag handle is always visible

- first fix was at this commit: a8453657c9

client/components/cards/checklists.jade

@@ -102,9 +102,9 @@ template(name='checklistItemDetail')
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      if isMiniScreenOrShowDesktopDragHandles
+        span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
-        if isMiniScreenOrShowDesktopDragHandles
-          span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
         +viewer
           = item.title
     else

client/components/cards/checklists.styl

@@ -134,7 +134,7 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
     background-color: darken(white, 8%)
 
   .check-box-container
-    padding-right: 1px;
+    padding-right: 10px;
 
   .check-box
     margin: 0.1em 0 0 0;
@@ -144,7 +144,6 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
 
   .item-title
     flex: 1
-    margin-left: 10px;
     &.is-checked
       color: #8c8c8c
       font-style: italic
@@ -157,9 +156,8 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
         max-width: 420px
 
   span.fa.checklistitem-handle
-    float: right
-    padding-right: 20px
-    padding-top: 6px
+    padding-top: 2px
+    padding-right: 10px;
 
 .js-delete-checklist-item
   margin: 0 0 0.5em 1.33em