Add calculation of the placeholder width for drop lists

- Important for vertically positioned drop lists
- Analogous to the calculation of the height

projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts

@@ -64,7 +64,8 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
               {{value.text}}
             </div>
             <div class="drag-placeholder" *cdkDragPlaceholder
-                 [style.height.%]="placeholderHeight">
+                 [style.height.%]="placeholderHeight"
+                 [style.width.%]="placeholderWidth">
             </div>
             {{value.text}}
           </div>
@@ -92,11 +93,12 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
 export class DropListSimpleComponent extends FormElementComponent {
   @Input() elementModel!: DropListSimpleElement;
   placeholderHeight: number = 1;
+  placeholderWidth: number = 1;
 
   bodyElement: HTMLElement = document.body;
 
   dragStart(event: CdkDragStart<DropListSimpleComponent>): void {
-    this.setPlaceholderHeight(
+    this.setPlaceholderDimensions(
       event.source.dropContainer.data.elementFormControl.value.length - 1,
       event.source.dropContainer.data.elementModel.orientation
     );
@@ -139,13 +141,14 @@ export class DropListSimpleComponent extends FormElementComponent {
     const presentValueIDs = event.container.data.elementFormControl.value
       .map((value: DragNDropValueObject) => value.id);
     const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0;
-    this.setPlaceholderHeight(
+    this.setPlaceholderDimensions(
       presentValueIDs.length - itemCountOffset,
       event.container.data.elementModel.orientation);
   }
 
-  setPlaceholderHeight(itemsCount: number, orientation: unknown): void {
+  setPlaceholderDimensions(itemsCount: number, orientation: unknown): void {
     this.placeholderHeight = itemsCount && orientation !== 'horizontal' ? 1 : 100;
+    this.placeholderWidth = itemsCount && orientation !== 'vertical' ? 1 : 100;
   }
 
   onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (

projects/common/components/input-elements/drop-list.component.ts

@@ -75,7 +75,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
               {{dropListValueElement.text}}
             </div>
             <div class="drag-placeholder" *cdkDragPlaceholder
-                 [style.height.%]="placeholderHeight">
+                 [style.height.%]="placeholderHeight"
+                 [style.width.%]="placeholderWidth">
             </div>
             {{dropListValueElement.text}}
           </div>
@@ -142,9 +143,10 @@ export class DropListComponent extends FormElementComponent {
   bodyElement: HTMLElement = document.body;
   draggedItemIndex: number | null = null;
   placeholderHeight: number = 1;
+  placeholderWidth: number = 1;
 
   dragStart(itemIndex: number, event: CdkDragStart<DropListSimpleComponent>): void {
-    this.setPlaceholderHeight(
+    this.setPlaceholderDimensions(
       event.source.dropContainer.data.elementFormControl.value.length - 1,
       event.source.dropContainer.data.elementModel.orientation
     );
@@ -190,13 +192,14 @@ export class DropListComponent extends FormElementComponent {
     const presentValueIDs = event.container.data.elementFormControl.value
       .map((value: DragNDropValueObject) => value.id);
     const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0;
-    this.setPlaceholderHeight(
+    this.setPlaceholderDimensions(
       presentValueIDs.length - itemCountOffset,
       event.container.data.elementModel.orientation);
   }
 
-  setPlaceholderHeight(itemsCount: number, orientation: unknown): void {
+  setPlaceholderDimensions(itemsCount: number, orientation: unknown): void {
     this.placeholderHeight = itemsCount && orientation !== 'horizontal' ? 1 : 100;
+    this.placeholderWidth = itemsCount && orientation !== 'vertical' ? 1 : 100;
   }
 
   onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (