runner: minishell keeps displaying previous commands' returns

slapos/runner/static/css/editor.css

@@ -67,8 +67,9 @@ border-left:1px #E4E4E4 solid; cursor:pointer; color: #5C7077; text-shadow: 0px
   color: #074A86;
   box-sizing: border-box;
   border: 2px inset #6A93A0;
+  overflow: auto;
 }
-#shell-result::first-line
+.runned-command
 { 
   font-weight: bold;
 }

slapos/runner/static/js/scripts/shell.js

@@ -39,9 +39,10 @@ $(document).ready(function () {
       var old_shell_btn_background = $(".shell_btn").css("background");
       $(".shell_btn").css("background", "url(/static/css/images/loading-min.gif) center right no-repeat")
       $.post("/runCommand", data, function (data) {
-        var data = ">>> " + command + "\n\n" + data;
-        $("#shell-result").val(data);
+        var data = "<p><span class=\"runned-command\">>>> " + command + "</span></p><br/><pre>" + data + "</pre><br/>";
+        $("#shell-result").append(data);
         $("#shell-input").val("");
+        $("#shell-result").scrollTop($("#shell-result")[0].scrollHeight);
         updateHistory();
       })
       .fail( function(xhr, status, error) {

slapos/runner/templates/softwareFolder.html

@@ -58,8 +58,8 @@
   </div>
   <div class="clear"></div>
   <div id="shell-window">
-    <textarea id="shell-result" cols="80" readonly>
-    </textarea>
+    <div id="shell-result">
+    </div>
     <input type="text" name="command" id="shell-input" autocomplete="off" placeholder="Type command ..." />
   </div>
   <div class="clear"></div>