Updated UI for editing saved views with custom fields

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row mt-2 align-items-center">
-    <ng-container i18n>Selected</ng-container>:
+    {{title}}:
     <div class="ms-2 d-flex flex-row gap-2 w-100"
         cdkDropList #selectedList="cdkDropList"
         cdkDropListOrientation="horizontal"
@@ -11,7 +11,6 @@
     </div>
 </div>
 <div class="d-flex flex-row mt-2 align-items-center bg-light p-2">
-    <ng-container i18n></ng-container>
     <div class="d-flex flex-row gap-2 w-100"
         cdkDropList #unselectedList="cdkDropList"
         cdkDropListOrientation="horizontal"

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss

@@ -1,3 +1,7 @@
 .badge {
     cursor: move;
 }
+
+.d-flex {
+    overflow-x: scroll;
+}

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts

@@ -20,6 +20,8 @@ import {
   styleUrl: './drag-drop-select.component.scss',
 })
 export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
+  @Input() title: string = $localize`Selected items`
+
   @Input() items: { id: string; name: string }[] = []
   public selectedItems: { id: string; name: string }[] = []
 
@@ -53,7 +55,10 @@ export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
         0,
         this.unselectedItems[event.previousIndex]
       )
-    } else {
+    } else if (
+      event.container === this.unselectedList &&
+      event.previousContainer === this.selectedList
+    ) {
       this.selectedItems.splice(event.previousIndex, 1)
     }
     this.onChange(this.selectedItems.map((i) => i.id))