implementation ready for testing

app/assets/javascripts/editor.js.erb

@@ -403,8 +403,6 @@ $(function() {
     $('.editor').each(function(index, element) {
       var editor = ace.edit(element);
 
-      console.log('ace', element)
-
       if (qa_api) {
         editor.getSession().on("change", function (deltaObject) {
           qa_api.executeCommand('syncEditor', [active_file, deltaObject]);
@@ -836,9 +834,9 @@ $(function() {
 
   var showFrame = function(frame) {
     active_frame = frame;
-    // should not be hidden to generate multiple ace editors in edit mode
-    //$('.frame').hide();
-    $('.frame').show();
+    $('.frame').hide();
+    frame.show();
+
   };
 
   var showOutput = function(event) {

app/assets/stylesheets/editor.css.scss

@@ -4,14 +4,12 @@ button i.fa-spin {
 
 .editor {
   height: 100%;
-  width: auto;
-  margin: 12px;
+  width: 100%;
 }
 
 .frame {
   display: none;
-  height: 200px;
-  width: auto;
+  height: 400px;
 
   audio, img, video {
     max-width: 100%;
@@ -57,11 +55,8 @@ button i.fa-spin {
 
 #files {
   overflow: auto;
-
 }
 
-
-
 #hint {
   display: none;
 }