Fix positioning issue for keyboard help.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -182,7 +182,6 @@
     opacity: 0.5;
 }
 
-
 /*** Drop Target ***/
 .xblock--drag-and-drop .target {
     display: table;
@@ -232,7 +231,6 @@
     /* W3C */
     box-pack:center;
     box-align:center;
-
 }
 
 /* Focused zone */
@@ -306,6 +304,15 @@
     margin-bottom: 6px;
 }
 
+.xblock--drag-and-drop .keyboard-help-dialog {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: 1px;
+    height: 1px;
+    z-index: 1500;
+}
+
 .xblock--drag-and-drop .modal-window-overlay {
     display: none;
     position: fixed;
@@ -321,10 +328,12 @@
 .xblock--drag-and-drop .modal-window {
     display: none;
     position: absolute;
-    top: 45%;
-    width: 50%;
+    width: 600px;
+    max-width: 90vw;
+    height: auto;
+    transform: translate(-50%, -50%);
     box-sizing: border-box;
-    box-shadow: 0 0 7px rgba(0,0,0,0.4);
+    box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
     border-radius: 4px;
     padding: 7px;
     background-color: #e5e5e5;
@@ -333,7 +342,6 @@
     z-index: 1500;
 }
 
-
 .xblock--drag-and-drop .modal-content {
     border-radius: 5px;
     background: white;
@@ -345,7 +353,6 @@
     margin-left: 2%;
 }
 
-
 .xblock--drag-and-drop .keyboard-help-button,
 .xblock--drag-and-drop .reset-button {
     cursor: pointer;

tests/integration/test_interaction.py

@@ -242,7 +242,7 @@ class InteractionTestBase(object):
         self.scroll_down(pixels=scroll_down+150)
 
         reset = self._get_reset_button()
-        if action_key is not None:  # Using keyboard to interact with block:
+        if action_key is not None:  # Using keyboard to interact with block
             reset.send_keys(Keys.RETURN)
         else:
             reset.click()