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,7 +5,6 @@
 
 virtual-scroller {
     height: 700px;
-}
 
     .item {
         padding: .25rem 1rem;
@@ -18,12 +17,22 @@ virtual-scroller {
             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);
@@ -46,3 +55,7 @@ virtual-scroller {
 .drag-container {
     position: relative;
 }
+
+.cdk-drag-preview {
+    margin: 1rem;
+}

frontend/src/app/theme/_common.scss

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