Disable array editor drag and drop.

frontend/src/app/features/content/shared/forms/array-editor.component.html

@@ -1,7 +1,8 @@
 <ng-container *ngIf="formModel.itemChanges | async; let items">
-    <div class="array-container" [class.expanded]="isExpanded" *ngIf="items.length > 0 && items.length <= 20;"
+    <div class="array-container static" [class.expanded]="isExpanded" *ngIf="items.length > 0 && items.length <= 20;"
         cdkDropList
-        [cdkDropListDisabled]="false"
+        [cdkDropListSortingDisabled]="isDisabled | async"
+        [cdkDropListDisabled]="isDisabled | async"
         [cdkDropListData]="items"
         (cdkDropListDropped)="sort($event)">
         <div *ngFor="let itemForm of items; index as i; last as isLast; first as isFirst;" class="table-drag item"
@@ -26,7 +27,7 @@
                 (itemMove)="move(itemForm, $event)" 
                 [language]="language"
                 [languages]="languages">
-                <i cdkDragHandle class="icon-drag2"></i>
+                <i cdkDragHandle class="icon-drag2" [class.hidden]="isDisabled | async"></i>
             </sqx-array-item>
         </div>
     </div>

frontend/src/app/features/content/shared/forms/array-editor.component.scss

@@ -5,25 +5,34 @@
 
 virtual-scroller {
     height: 700px;
-}
 
-.item {
-    padding: .25rem 1rem;
+    .item {
+        padding: .25rem 1rem;
 
-    &.first {
-        padding-top: .75rem;
-    }
+        &.first {
+            padding-top: .75rem;
+        }
 
-    &.last {
-        padding-bottom: .75rem;
+        &.last {
+            padding-bottom: .75rem;
+        }
     }
 }
 
+.static {
+    padding-bottom: .375rem;
+    padding-top: .375rem;
+}
+
+.item {
+    padding: .375rem 1rem;
+}
+
 .array-container {
     background: $color-border-lighter;
     margin: 0;
     margin-bottom: 1rem;
-    overflow-y: auto;
+    overflow-y: hidden;
 
     &.expanded {
         @include absolute(3rem, 1.25rem, 2.375rem + 1rem + .75rem, 1.25rem);
@@ -45,4 +54,8 @@ virtual-scroller {
 
 .drag-container {
     position: relative;
+}
+
+.cdk-drag-preview {
+    margin: 1rem;
 }

frontend/src/app/theme/_common.scss

@@ -85,10 +85,17 @@ hr {
     opacity: .7;
 
     &.table-drag {
-        background: $color-white;
-        border: 2px dashed darken($color-border, 5%);
         display: table;
 
+        &::before {
+            @include force-height(100%);
+            background: $color-white;
+            border: 2px dashed darken($color-border, 5%);
+            border-radius: 2px;
+            display: block;
+            content: '';
+        }
+
         * {
             display: none;
         }