scroll panes don't overlap on editor render

app/components/SimpleEditor/Editor.js

@@ -10,7 +10,7 @@ import Comments from './panes/Comments/CommentBoxList'
 import CommentsProvider from './panes/Comments/CommentsProvider'
 import ContainerEditor from './ContainerEditor'
 
-import Notes from './panes/Notes/Notes'
+// import Notes from './panes/Notes/Notes'
 import NotesProvider from './panes/Notes/NotesProvider'
 
 // import TableOfContents from './panes/TableOfContents/TableOfContents'

app/components/SimpleEditor/SimpleEditor.scss

@@ -263,7 +263,7 @@ $active-blue: #4a90e2;
     color: $transparent-black;
     font-family: 'Fira Sans';
     line-height: 38px;
-    margin: 1.5% 0% 5% 15%;
+    margin: 1.5% 0% 0% 15%;
     min-height: 100vh;
     padding: 1% 0%;
     transition: .3s;

app/components/SimpleEditor/notesEditor/notesEditor.scss

@@ -16,10 +16,10 @@ $background: #fff;
 
     .se-scrollable {
       background: $background;
-      margin-top: 0;
-      min-height: 95px;
+      margin: 0% 0% 5% 0%;
+      min-height: 135px;
 
-     .se-content {
+     div.se-content {
        background: $background;
        box-shadow: none;
        margin: 0;

app/components/SimpleEditor/panes/Notes/Notes.js

@@ -19,11 +19,7 @@ class Notes extends Component {
   }
 
   didUpdate () {
-    // TEMP This will be merged in redesign branch.
-    this.el.el.classList.remove('sm-auto-fill')
-    this.el.el.classList.remove('se-pane')
-    const mainScrollPane = document.getElementById('content-panel')
-    mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
+    this.computeScrollPane()
   }
 
   render ($$) {
@@ -104,6 +100,11 @@ class Notes extends Component {
     window.removeEventListener('mouseup', this.stopResize, false)
   }
 
+  computeScrollPane () {
+    const mainScrollPane = document.getElementById('content-panel').children
+    mainScrollPane[0].style.maxHeight = this.el.el.offsetTop - 162 + 'px'
+  }
+
   onNotesUpdated (change) {
     const notesProvider = this.getProvider()
     notesProvider.handleDocumentChange(change)

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

@@ -5,7 +5,7 @@ $light-blue: #e4f0ff;
   background-color: $white;
   bottom: 0;
   counter-reset: note-footer;
-  height: 95px;
+  height: 135px;
   left: 15%;
   max-height: 700px;
   min-height: 10px;