Reposition preview modal once the content is loaded to avoid collisions

frontend/src/app/components/modals/preview-modal/wp-preview-modal/wp-preview.modal.ts

@@ -34,6 +34,7 @@ import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {WorkPackageResource} from "core-app/modules/hal/resources/work-package-resource";
 import {HalResource} from "core-app/modules/hal/resources/hal-resource";
 import {WorkPackageCacheService} from "core-components/work-packages/work-package-cache.service";
+import {PreviewTriggerService} from "core-app/globals/global-listeners/preview-trigger.service";
 
 @Component({
   templateUrl: './wp-preview.modal.html',
@@ -52,7 +53,8 @@ export class WpPreviewModal extends OpModalComponent implements OnInit {
               readonly cdRef:ChangeDetectorRef,
               readonly i18n:I18nService,
               readonly wpCacheService:WorkPackageCacheService,
-              readonly opModalService:OpModalService) {
+              readonly opModalService:OpModalService,
+              readonly previewTriggerService:PreviewTriggerService) {
     super(locals, cdRef, elementRef);
   }
 
@@ -65,6 +67,9 @@ export class WpPreviewModal extends OpModalComponent implements OnInit {
       .then((workPackage:WorkPackageResource) => {
         this.workPackage = workPackage;
         this.cdRef.detectChanges();
+
+        const modal = jQuery(this.elementRef.nativeElement).find('.preview-modal--container');
+        this.previewTriggerService.reposition(modal, this.locals.event.target);
       });
   }
 }

frontend/src/app/globals/global-listeners/preview-trigger.service.ts

@@ -52,14 +52,9 @@ export class PreviewTriggerService {
         return;
       }
 
-      this.previewModal = this.opModalService.show(WpPreviewModal, this.injector, { workPackageLink: href });
+      this.previewModal = this.opModalService.show(WpPreviewModal, this.injector, { workPackageLink: href, event: e });
       this.modalElement = this.previewModal.elementRef.nativeElement;
-      jQuery(this.modalElement).position({
-        my: 'left top',
-        at: 'left bottom',
-        of: el,
-        collision: 'flipfit'
-      });
+      this.reposition(jQuery(this.modalElement), el);
 
       jQuery(this.modalElement).addClass('-no-width -no-height');
     });
@@ -78,6 +73,15 @@ export class PreviewTriggerService {
     });
   }
 
+  public reposition(element:JQuery<HTMLElement>, target:JQuery<HTMLElement>) {
+    element.position({
+      my: 'right top',
+      at: 'right bottom',
+      of: target,
+      collision: 'flipfit'
+    });
+  }
+
   private isMouseOverPreview(e:JQuery.MouseLeaveEvent) {
     if (!this.modalElement) {
       return false;