🪲 Display ask and keypressed modals below the output pane (#6025)

This PR ensures that the ask modal and the key-pressed modal displayed in the output pane, appear below the output editor instead of on top of it.

Fixes #5946

**How to test**
The output appears in 3 different places and each of them have to be tested:
- output on the /hedy page
- output on the /tryit page
- output in teacher slides (embedded editor) 

I tested with the following code in level 15. Make sure to test consecutive displaying of only the ask and only the key-press modals, and then alternating between the two.
```
for i in range 1 to 10
    print 'Some stuff'
for i in range 1 to 10
    if x is pressed
        print 'ya'
    else
        print 'nee'
    a is ask 'what'
    print a
```

It is essential to check that:
- no modal is displayed on top the output.
- the output window always scrolls to the bottom. It should not be the case that when a modal appears beneath the output, its content gets scrolled up because the latest content will remain hidden (specifically test this for if-pressed).
- check if there are any changes for the turtle canvas
- note that showing the variable list seems to be broken and not related to this change

static/vendor/skulpt-stdlib-extensions.js

@@ -42,6 +42,9 @@ var $builtinmodule = function (name) {
     function keyBoardInputPromise(if_pressed_mapping) {
       ongoingIfPressedCall = true;
       $('#keybinding_modal').show();
+      const outputDiv = $('#output');
+      outputDiv.scrollTop(outputDiv.prop('scrollHeight'));
+
       return new Promise((resolve, reject) => {
         window.addEventListener("keydown", (event) => {
           try {

templates/embedded-editor.html

@@ -72,7 +72,8 @@
                       <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
                       <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
                       <div id="inline_modal" class="flex-0">
-                        <div id="ask_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none">
+                        <div id="ask_modal"
+                             class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100" style="display: none">
                         <!--Title-->
                             <div class="flex justify-between items-center">
                             <p class="text-2xl font-bold caption">Header</p>
@@ -86,7 +87,8 @@
                             </div>
                         </form>
                     </div>
-                    <div id="keybinding_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none;z-index: 99; position: absolute; bottom: 0; width: 100%;">
+                    <div id="keybinding_modal"
+                         class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100" style="display: none;z-index: 99; position: absolute; bottom: 0; width: 100%;">
                       <!--Title-->
                       <div class="flex justify-between items-center">
                         <p class="text-2xl font-bold caption">{{_('keybinding_waiting_for_keypress')}}</p>

templates/hedy-page/editor-and-output.html

@@ -80,7 +80,7 @@
   <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-hidden" id="code_output" style="height: {{editor_height}}">
     <div id="output" data-cy="output" tabindex=0 class="flex-1 rounded p-2 px-3 color-white w-full text-lg overflow-auto" style="background: #272822; min-height: 3rem;"></div>
     <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
-    <div class="overflow-auto flex-0 absolute bottom-0 w-full z-20 bg-blue-100">
+    <div class="overflow-auto flex-0 bottom-0 w-full z-20 bg-blue-100">
       <div id="variable_button" class="hidden my-3 cursor-pointer" onclick="$('#variable_list').slideToggle('medium');">
             <div class="h-2 z-10 bg-blue-500 content-center justify-center grid text-center">
                 <div class="w-fit bg-blue-500 text-white px-5 rounded-lg text-sm">
@@ -106,8 +106,9 @@
           <!-- For some reason the Tailwind ml-0 doesn't do the trick here -->
       </div>
     </div>
-    <div id="inline_modal" class="flex-0 absolute bottom-0 w-full z-20">
-      <div id="ask_modal" data-cy="ask_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none">
+    <div id="inline_modal" class="flex-0 bottom-0 w-full z-20">
+      <div id="ask_modal" data-cy="ask_modal"
+           class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100" style="display: none">
         <!--Title-->
         <div class="flex justify-between items-center">
           <p class="text-2xl font-bold caption">Header</p>
@@ -121,13 +122,15 @@
           </div>
         </form>
       </div>
-      <div id="keybinding_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none;z-index: 99; position: absolute; bottom: 0; width: 100%;">
+      <div id="keybinding_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
+           style="display: none">
         <!--Title-->
         <div class="flex justify-between items-center">
           <p class="text-2xl font-bold caption">{{_('keybinding_waiting_for_keypress')}}</p>
         </div>
       </div>
-      <div id="sleep_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none;z-index: 99;">
+      <div id="sleep_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
+           style="display: none;z-index: 99;">
         <!--Title-->
         <div class="flex justify-between items-center">
           <p class="text-2xl font-bold caption">{{_('sleeping')}}</p>
@@ -257,4 +260,4 @@
     </div>
   </div>
 
-</div>
+</div>

templates/incl/editor-and-output.html

@@ -86,7 +86,7 @@
     <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-auto" id="code_output" style="height: {{editor_height}}">
       <div id="output" data-cy="output" tabindex=0 class="flex-1 rounded p-2 px-3 pb-10 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
       <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
-      <div class="overflow-auto flex-0 absolute bottom-0 w-full z-20 bg-blue-100">
+      <div class="overflow-auto flex-0 bottom-0 w-full z-20 bg-blue-100">
         <div id="variable_button" class="hidden my-3 cursor-pointer" onclick="$('#variable_list').slideToggle('medium');">
           <div class="h-2 z-10 bg-blue-500 content-center justify-center grid text-center">
               <div class="w-fit bg-blue-500 text-white px-5 rounded-lg text-sm">
@@ -112,8 +112,9 @@
             <!-- For some reason the Tailwind ml-0 doesn't do the trick here -->
         </div>
       </div>
-      <div id="inline_modal" class="flex-0 absolute bottom-0 w-full z-20">
-        <div id="ask_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none">
+      <div id="inline_modal" class="flex-0 bottom-0 w-full z-20">
+        <div id="ask_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
+             style="display: none">
           <!--Title-->
           <div class="flex justify-between items-center">
             <p class="text-2xl font-bold caption">Header</p>
@@ -127,13 +128,15 @@
             </div>
           </form>
         </div>
-        <div id="keybinding_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none;z-index: 99; position: absolute; bottom: 0; width: 100%;">
+        <div id="keybinding_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
+             style="display: none">
           <!--Title-->
           <div class="flex justify-between items-center">
             <p class="text-2xl font-bold caption">{{_('keybinding_waiting_for_keypress')}}</p>
           </div>
         </div>
-        <div id="sleep_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none;z-index: 99;">
+        <div id="sleep_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
+             style="display: none;z-index: 99;">
           <!--Title-->
           <div class="flex justify-between items-center">
             <p class="text-2xl font-bold caption">{{_('sleeping')}}</p>
@@ -283,4 +286,4 @@
   </div>
 {% else %}
   <div _="on load hedyApp.setDevelopersMode('load', true)"></div>
-{% endif %}
+{% endif %}