Merge pull request #143 from edx-solutions/mtyaka/fix-mobile-popup-position

Use fixed positioning for mobile popups.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -430,7 +430,6 @@
 
 .xblock--drag-and-drop .popup {
     position: absolute;
-    display: none;
     top: 5%;
     right: 5%;
     border: 1px solid #fff;
@@ -503,12 +502,19 @@
     }
 
     .xblock--drag-and-drop .popup {
+        display: flex;
+        flex-direction: column;
         background-color: #fff;
         border-radius: 10px;
         text-align: center;
         box-shadow: 0 0 100px rgba(0,0,0,0.4);
         border: none;
         max-height: 90vh;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        right: auto;
+        transform: translate(-50%, -50%);
     }
 
     .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
@@ -545,6 +551,8 @@
         border-color: #eee;
         border-style: solid;
         border-width: 1px 0 1px 0;
+        flex-shrink: 1;
+        overflow: auto;
     }
 
     .xblock--drag-and-drop .popup .popup-content ul {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -446,10 +446,15 @@ function DragAndDropTemplates(configuration) {
             );
         }
 
+        var popup_style = {};
+        if (!have_messages) {
+            popup_style.display = 'none';
+        }
+
         return h(
             popupSelector,
             {
-                style: {display: have_messages ? 'block' : 'none'}
+                style: popup_style
             },
             [
                 h(
@@ -493,13 +498,18 @@ function DragAndDropTemplates(configuration) {
                 ),
                 popup_content,
                 h(
-                    'button.unbutton.close-feedback-popup-button.close-feedback-popup-mobile-button',
-                    {},
+                    'div',
                     [
                         h(
-                            'span',
+                            'button.unbutton.close-feedback-popup-button.close-feedback-popup-mobile-button',
                             {},
-                            gettext("Close")
+                            [
+                                h(
+                                    'span',
+                                    {},
+                                    gettext("Close")
+                                )
+                            ]
                         )
                     ]
                 )