1 files changed, 37 insertions, 38 deletions

diff --git a/static/style.css b/static/style.css
index fd229a4..113b57f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -26,6 +26,8 @@
   --color-red: #ff6262;
   --color-orange: #ffd596;
   --color-green: #c8ffa7;
+
+  --navbar-height: calc(calc(2 * var(--gap)) + 20px);
   --gap: 12px;
 }
 
@@ -70,6 +72,7 @@ h6 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: var(--navbar-height);
   padding: var(--gap);
   background-color: var(--color-pink);
 }
@@ -80,67 +83,63 @@ h6 {
   color: #000;
 }
 
-.playground {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  flex: auto;
-  max-width: 100vw;
-}
-
-#text {
-  flex: 1;
+#left,
+#output,
+#editor {
+  min-height: 200px;
+  overflow-y: auto;
+  border-bottom: 2px solid var(--color-pink);
+  margin: 0;
+  overflow-wrap: break-word;
 }
 
-#text > :first-child {
+#left > :first-child {
   margin-top: 0;
 }
 
 #editor {
-  flex: 1;
   position: relative;
 }
 
-#output {
-  flex: 1;
-}
-
 @media (min-width: 600px) {
-  #text,
-  #output,
-  #editor {
+  #playground {
+    position: fixed;
+    top: 44px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  #left,
+  #right {
     width: 50vw;
+    position: absolute;
+    top: 0;
+    bottom: 0;
   }
-  #text {
-    flex-basis: 100%;
+
+  #left {
     border-right: 2px solid var(--color-pink);
   }
-  #editor {
-    flex: 1.62;
+
+  #right {
+    right: 0;
   }
-  #output,
-  #editor {
-    max-height: 50vh;
+
+  #right > :first-child {
+    height: 62%;
+  }
+  #right > :last-child {
+    height: 38%;
   }
 }
 
-#text,
+#left,
 #output > *,
 #editor .codeflask__flatten {
   padding: var(--gap);
 }
 
-#text,
-#output,
-#editor {
-  min-width: 50%;
-  max-width: 100%;
-  overflow-y: auto;
-  border-bottom: 2px solid var(--color-pink);
-  margin: 0;
-  overflow-wrap: break-word;
-}
-
 #output > * {
   margin: 0;
   white-space: pre-wrap;