🐛 playsite: Fix scroll bug (#452)

Fix scroll bug where when an Evy program was started with ctrl+enter on
the playsite or labsite and there was an `on key` eventhandler handling
arrow key movements, the Evy code editor **also** started scrolling.

This behavior _only_ occurred when the Evy program was started with
ctrl+enter shortcut, not with the Run button.

Pull-request: #452

frontend/lab/index.html

@@ -99,7 +99,7 @@ <h2>🚀 Let's get started!</h2>
             </pre>
           </div>
         </div>
-        <div class="output">
+        <div class="output" tabindex="0">
           <div class="canvas"><canvas id="canvas"></canvas></div>
           <div class="read hidden">
             <label for="read">input&gt;</label>

frontend/play/css/index.css

@@ -450,6 +450,7 @@ dialog .err,
   margin: 0;
   border: var(--output-border);
   border-top-width: var(--output-border-top-width);
+  outline: none;
 }
 
 .output .canvas {

frontend/play/index.html

@@ -103,7 +103,7 @@
             </pre>
           </div>
         </div>
-        <div class="output">
+        <div class="output" tabindex="0">
           <div class="canvas"><canvas id="canvas"></canvas></div>
           <div class="read hidden">
             <label for="read">input&gt;</label>

frontend/play/index.js

@@ -1036,6 +1036,7 @@ function unfocusRunButton() {
 
 function keydownListener(e) {
   if (e.target.id == "evy-editor") return // skip for source code input
+  document.querySelector(".output").focus()
   const { ptr, len } = stringToMem(e.key)
   wasmInst.exports.onKey(ptr, len)
 }