Fix: Search preview container for mobile annotations dialog

src/lib/annotations/AnnotationDialog.js

@@ -37,6 +37,7 @@ const CLASS_ANIMATE_DIALOG = 'bp-animate-show-dialog';
         super();
 
         this.annotatedElement = data.annotatedElement;
+        this.container = data.container;
         this.location = data.location;
         this.hasAnnotations = data.annotations.length > 0;
         this.canAnnotate = data.canAnnotate;
@@ -68,7 +69,7 @@ const CLASS_ANIMATE_DIALOG = 'bp-animate-show-dialog';
     show() {
         // Populate mobile annotations dialog with annotations information
         if (this.isMobile) {
-            this.element = this.annotatedElement.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
+            this.element = this.container.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
             annotatorUtil.showElement(this.element);
             this.element.appendChild(this.dialogEl);
 

src/lib/annotations/AnnotationThread.js

@@ -41,6 +41,7 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
         this.annotatedElement = data.annotatedElement;
         this.annotations = data.annotations || [];
         this.annotationService = data.annotationService;
+        this.container = data.container;
         this.fileVersionId = data.fileVersionId;
         this.location = data.location;
         this.threadID = data.threadID || AnnotationService.generateID();

src/lib/annotations/__tests__/AnnotationDialog-test.js

@@ -21,6 +21,7 @@ describe('lib/annotations/AnnotationDialog', () => {
 
         dialog = new AnnotationDialog({
             annotatedElement: document.querySelector('.annotated-element'),
+            container: document,
             location: {},
             annotations: [],
             canAnnotate: true

src/lib/annotations/doc/DocAnnotator.js

@@ -260,6 +260,7 @@ function isThreadInHoverState(thread) {
             annotatedElement: this.annotatedElement,
             annotations,
             annotationService: this.annotationService,
+            container: this.container,
             fileVersionId: this.fileVersionId,
             isMobile: this.isMobile,
             locale: this.locale,

src/lib/annotations/doc/DocHighlightThread.js

@@ -257,6 +257,7 @@ const HOVER_TIMEOUT_MS = 75;
     createDialog() {
         this.dialog = new DocHighlightDialog({
             annotatedElement: this.annotatedElement,
+            container: this.container,
             annotations: this.annotations,
             locale: this.locale,
             location: this.location,

src/lib/annotations/doc/DocPointThread.js

@@ -70,6 +70,7 @@ const POINT_ANNOTATION_ICON_WIDTH = 24;
     createDialog() {
         this.dialog = new DocPointDialog({
             annotatedElement: this.annotatedElement,
+            container: this.container,
             annotations: this.annotations,
             locale: this.locale,
             location: this.location,

src/lib/annotations/image/ImageAnnotator.js

@@ -91,6 +91,7 @@ const ANNOTATED_ELEMENT_SELECTOR = '.bp-image, .bp-images-wrapper';
             annotatedElement: this.annotatedElement,
             annotations,
             annotationService: this.annotationService,
+            container: this.container,
             fileVersionId: this.fileVersionId,
             isMobile: this.isMobile,
             locale: this.locale,

src/lib/annotations/image/ImagePointThread.js

@@ -47,6 +47,7 @@ const POINT_ANNOTATION_ICON_WIDTH = 24;
     createDialog() {
         this.dialog = new ImagePointDialog({
             annotatedElement: this.annotatedElement,
+            container: this.container,
             annotations: this.annotations,
             location: this.location,
             locale: this.locale,