From 941903c3147b3ea460ca0b4d4378656ffa4656b0 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Wed, 13 Dec 2023 01:00:08 +0200
Subject: [PATCH] fix(codemirror): fix codemirror editor showing nothing on
 start on small layouts when starting in ouput mode

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).
---
 src/SplitPane.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 44d6ef60..b288a7ef 100644
--- a/src/SplitPane.vue
+++ b/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>