fix(codemirror): fix codemirror editor showing nothing on start on small layouts when starting in ouput mode (#181)

CodeMirror Editor tries to auto-size when it starts.
If the Repl start in Output mode on small layouts CodeMirror will not be able to autosize because it has `display: none`.
From the POV of user the only solution is to change editor tabs to see the code (if it has more tabs).

Author: pdanpdan

src/SplitPane.vue

@@ -162,8 +162,10 @@ function dragEnd() {
 @media (max-width: 720px) {
   .left,
   .right {
-    width: 100% !important;
-    height: 100% !important;
+    position: absolute;
+    inset: 0;
+    width: auto !important;
+    height: auto !important;
   }
   .dragger {
     display: none;
@@ -172,13 +174,20 @@ function dragEnd() {
     display: block;
   }
   .split-pane .right {
-    display: none;
+    z-index: -1;
+    pointer-events: none;
+  }
+  .split-pane .left {
+    z-index: 0;
+    pointer-events: all;
   }
   .split-pane.show-output .right {
-    display: block;
+    z-index: 0;
+    pointer-events: all;
   }
   .split-pane.show-output .left {
-    display: none;
+    z-index: -1;
+    pointer-events: none;
   }
 }
 </style>