more containers plus notes-line

app/components/SimpleEditor/Editor.js

@@ -91,7 +91,7 @@ class Editor extends ProseEditor {
     }).addClass('sc-comments-pane')
     : $$('div')
 
-    const editorWithComments = $$(SplitPane, { sizeA: '100%', splitType: 'vertical' })
+    const editorWithComments = $$(SplitPane, { sizeA: '80%', splitType: 'vertical' })
       .append(
         editor,
         commentsPane

app/components/SimpleEditor/SimpleEditor.scss

@@ -47,6 +47,10 @@ $active-blue: #4a90e2;
   right: 0;
   top: 0;
 
+  .sc-container-editor {
+    max-width: 950px;
+  }
+
   .se-toolbar-wrapper .sc-toolbar {
     background-color: $primary;
     border: 1px solid $border;
@@ -231,7 +235,7 @@ $active-blue: #4a90e2;
       position: fixed;
       top: 0;
       user-select: none;
-      width: 128px;
+      width: 8%;
       z-index: 100;
 
       .sc-toolbar {
@@ -259,13 +263,13 @@ $active-blue: #4a90e2;
 
   div.se-content {
     background-color: $white;
-    box-shadow: 0 0 8px $dark-gray;
+    // box-shadow: 0 0 8px $dark-gray;
     color: $transparent-black;
     font-family: 'Fira Sans';
     line-height: 38px;
-    margin: 1.5% 23.6% 5% 12%;
+    margin: 1.5% 0% 5% 15%;
     min-height: 100vh;
-    padding: 3% 4% 1%;
+    padding: 1% 0%;
     transition: .3s;
     word-wrap: break-word;
 

app/components/SimpleEditor/panes/Comments/commentsPane.scss

@@ -9,7 +9,7 @@ $white: #fff;
 
 .sc-prose-editor .se-content .sc-comment-pane-list {
   margin-top: 0;
-  padding-left: 27%;
+  padding-left: 5%;
   width: 100%;
 
   li {
@@ -20,9 +20,9 @@ $white: #fff;
     cursor: pointer;
     height: auto;
     list-style-type: none;
-    max-width: 110%;
+    max-width: 50%;
     min-height: 20px;
-    min-width: 110%;
+    min-width: 50%;
     position: absolute;
     word-wrap: break-word;
     z-index: 0;

app/components/SimpleEditor/panes/Notes/notes.scss

@@ -6,17 +6,20 @@ $light-blue: #e4f0ff;
   bottom: 0;
   counter-reset: note-footer;
   height: 95px;
-  left: 130px;
+  left: 15%;
   max-height: 700px;
   min-height: 10px;
   position: fixed;
-  width: 68.4%;
+  width: 80%;
   z-index: 0;
 
   .resize-area {
-    background-color: red;
+    background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 0%);
+    background-position: top;
+    background-size: 10px 1px;
+    background-repeat: repeat-x;
     cursor: row-resize;
-    height: 5px;
+    height: 3px;
     position: absolute;
     top: -14px;
     width: 100%;