Flexible LHS and RHS with flex

webapp/styles/editor.scss

@@ -1,13 +1,12 @@
 @import "constants.scss";
 
-div.rhs-open #editor .cm-editor .cm-content {
-  max-width: 550px;
-}
+//div.rhs-open #editor .cm-editor .cm-content {
+//  max-width: 550px;
+//}
 
 .cm-editor {
-  width: 100%;
-  height: 100%;
   font-size: var(--ident);
+  overflow-y: hidden;
 
   .cm-content {
     font-family: var(--editor-font);
@@ -15,34 +14,8 @@ div.rhs-open #editor .cm-editor .cm-content {
     max-width: $max-editor-width;
   }
 
-  .other-cursor {
-    display: inline-block;
-    width: 2px;
-    margin-right: -2px;
-    height: 1em;
-  }
-
-  .cursor-label-container {
-    // display: none;
-    position: relative;
-    top: 2ch;
-    float: left;
-    width: 120px;
-    height: 2.2ch;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    font-family: Arial, Helvetica, sans-serif;
-    color: #fff;
-    border: gray 1px solid;
-    background-color: purple;
-    // font-size: 0.5em;
-  }
-
-  .cursor-label-container label {
-    margin: 0;
-    padding: 0;
-    font-size: 0.7em;
+  &.cm-focused {
+    outline: none !important;
   }
 
   .cm-selectionBackground {

webapp/styles/main.scss

@@ -14,105 +14,112 @@
 
 html,
 body {
-  height: 100%;
   margin: 0;
+  height: 100%;
   padding: 0;
+  width: 100%;
+  overflow: hidden;
 }
 
-.panel {
-  position: absolute;
-  top: $top-bar-height + 1px;
-  bottom: $bottom-bar-height;
-  right: 0;
-  width: 50%;
-  z-index: 20;
-
-  iframe {
-    border: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0px;
-    margin: 0;
-  }
+#root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
 }
 
 #top {
+  display: flex;
+  flex-direction: row;
+
   height: $top-bar-height;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   background-color: rgb(213, 213, 213);
   border-bottom: rgb(193, 193, 193) 1px solid;
   color: rgb(55, 55, 55);
 
-  .inner {
-    padding-top: 12px;
-    max-width: $max-editor-width;
-    font-size: 28px;
-    margin: auto;
+  .main {
+    flex: 2;
 
-    .status {
-      float: right;
-      border: rgb(41, 41, 41) 1px solid;
-      border-radius: 5px;
-      padding: 3px;
-      font-size: 14px;
+    .inner {
+      max-width: $max-editor-width;
+      margin: auto;
+      padding-top: 12px;
+      font-size: 28px;
+
+      .status {
+        float: right;
+        border: rgb(41, 41, 41) 1px solid;
+        border-radius: 5px;
+        padding: 3px;
+        font-size: 14px;
+      }
+
+      .current-page {
+        font-family: var(--ui-font);
+        font-weight: bold;
+      }
+
+      .icon {
+        padding-left: 5px;
+        padding-right: 10px;
+      }
+
+      .icon.saved {
+        color: #015701;
+      }
+
+      .icon.unsaved {
+        color: #e19502;
+      }
     }
+  }
 
-    .current-page {
-      font-family: var(--ui-font);
-      font-weight: bold;
-    }
 
-    .icon {
-      padding-left: 5px;
-      padding-right: 10px;
-    }
+  .panel {
+    flex: 1;
 
-    .icon.saved {
-      color: #015701;
-    }
+  }
+}
 
-    .icon.unsaved {
-      color: #e19502;
+#main {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  height: 0;
+
+  .panel {
+    flex: 1;
+    border-left: 1px solid #eee;
+
+    iframe {
+      border: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
     }
   }
 
 }
 
+
 #editor {
-  position: absolute;
-  top: $top-bar-height;
-  bottom: $bottom-bar-height;
-  left: 0;
-  right: 0;
-  overflow-y: hidden;
+  overflow-y: scroll;
+  flex: 2;
+  height: 100%;
 }
 
-div.rhs-open #editor {
-  right: 50%;
-}
 
-div.rhs-open #top .inner {
-  max-width: 550px;
-  padding-right: 50%;
-}
-
-@media only screen and (max-width: $max-editor-width) {
-  .cm-editor .cm-content {
-    margin: 0 10px !important;
-  }
-}
+//
+//@media only screen and (max-width: $max-editor-width) {
+//  .cm-editor .cm-content {
+//    margin: 0 10px !important;
+//  }
+//}
 
 #bottom {
-  height: $bottom-bar-height;
-  background-color: #ccc;
-  position: fixed;
+  height: 25px;
   text-align: right;
-  bottom: 0;
-  left: 0;
-  right: 0;
   background-color: rgb(213, 213, 213);
   border-top: rgb(193, 193, 193) 1px solid;