improved layout and fixed bugs introduced new ones

codeeditor-app/app.less

@@ -22,6 +22,16 @@ html, body {
     height: 100%;
 }
 
+.flex-horiz > * {
+    min-height: auto !important;
+    max-height: none !important;
+}
+
+.flex-vert > * {
+    min-width: auto !important;
+    max-width: none !important;
+}
+
 
 .flex-horiz > *, .flex-vert > * {
     flex-grow: 1;
@@ -89,11 +99,57 @@ body {
     background: @editor-bg-white;
 }
 
-.code-editor-containers.force-close {
+.flex-dynamic.flex-horiz .code-editor-containers {
+    min-width: 50%;
+    max-width: 50%;
+}
+
+.flex-dynamic.flex-vert .code-editor-containers {
+    min-height: 50%;
+    max-height: 50%;
+}
+
+.flex-dynamic.flex-horiz .code-editor-containers.force-close {
     min-width: 0 !important;
     max-width: 0 !important;
 }
 
+.flex-dynamic.flex-vert .code-editor-containers.force-close {
+    min-height: 0 !important;
+    max-height: 0 !important;
+}
+
+.flex-dynamic.flex-horiz .code-editor-containers resize-handle[dir='vertical'] {
+    display: none;
+}
+
+.flex-dynamic.flex-vert .code-editor-containers resize-handle[dir='horizontal'] {
+    display: none;
+}
+
+@media (orientation: landscape) and (max-height: 320px) {
+    .output-frame-container {
+        display: none;
+    }
+
+    .code-editor-containers {
+        min-width: 100% !important;
+        max-width: 100% !important;
+    }
+}
+
+@media (orientation: portrait) and (max-height: 400px) {
+    .output-frame-container {
+        display: none;
+    }
+
+    .code-editor-containers {
+        min-height: 100% !important;
+        max-height: 100% !important;
+    }
+}
+
+
 @media (prefers-color-scheme: dark) {
     body {
         background: @median-bg-dark;