drag n drop adjustments

src/popup/scss/box.scss

@@ -377,10 +377,6 @@
                     }
                 }
             }
-
-            &:last-child {
-                padding-right: 2px !important;
-            }
         }
 
         &.no-pad .row-btn {
@@ -389,6 +385,41 @@
         }
     }
 
+    &:not(.box-draggable-row) {
+        .action-buttons .row-btn:last-child {
+            padding-right: 2px !important;
+        }
+    }
+
+    &.box-draggable-row {
+        &.box-content-row-checkbox {
+            input[type="checkbox"] + .drag-handle {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .drag-handle {
+        cursor: move;
+        padding: 10px 2px 10px 8px;
+        user-select: none;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+    }
+
+    &.cdk-drag-preview {
+        position: relative;
+        display: flex;
+        align-items: center;
+        opacity: 0.8;
+    
+        @include themify($themes) {
+            background-color: themed('boxBackgroundColor');
+        }
+    }
+
     select.field-type {
         margin: 5px 0 0 25px;
         width: calc(100% - 25px);
@@ -504,24 +535,3 @@
         }
     }
 }
-
-.box-drag-handle {
-    cursor: move;
-    user-select: none;
-    margin-left: 5px;
-
-    @include themify($themes) {
-        color: themed('mutedColor');
-    }
-}
-
-.cdk-drag-preview {
-    position: relative;
-    display: flex;
-    align-items: center;
-    opacity: .8;
-
-    @include themify($themes) {
-        background-color: themed('boxBackgroundColor');
-    }
-}

src/popup/vault/add-edit.component.html

@@ -275,9 +275,8 @@
                 {{'customFields' | i18n}}
             </div>
             <div class="box-content">
-                <div cdkDropList (cdkDropListDropped)="drop($event)">
-                    <ng-container *ngIf="cipher.hasFields">
-                        <div class="box-content-row box-content-row-multi" appBoxRow cdkDrag
+                <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
+                    <div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
                         *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
                         [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
                         <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
@@ -303,11 +302,10 @@
                                     [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                             </a>
                         </div>
-                            <span class="box-drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
+                        <div class="drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
                             <i class="fa fa-bars"></i>
-                            </span>
                         </div>
-                    </ng-container>
+                    </div>
                 </div>
                 <div class="box-content-row box-content-row-newmulti" appBoxRow>
                     <a href="#" appStopClick (click)="addField()">