From 7ad9f7b129a3c70cba8b3c3a0f8ab198ee636966 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Sat, 26 May 2018 19:58:08 -0400
Subject: [PATCH] fixed layouting issues

---
 .../javascripts/services/note_detail_render.js  | 17 ++++++++++++++---
 src/public/stylesheets/style.css                |  5 +++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/public/javascripts/services/note_detail_render.js b/src/public/javascripts/services/note_detail_render.js
index 9d997eeb6..4f212830c 100644
--- a/src/public/javascripts/services/note_detail_render.js
+++ b/src/public/javascripts/services/note_detail_render.js
@@ -13,18 +13,27 @@ let codeEditorInitialized;
 async function show() {
     codeEditorInitialized = false;
 
+    // if the note is empty, it doesn't make sense to do render-only since nothing will be rendered
+    if (!noteDetailService.getCurrentNote().content.trim()) {
+        toggleEdit();
+    }
+
     $noteDetailRender.show();
 
     await render();
 }
 
-$toggleEditButton.click(() => {
+async function toggleEdit() {
     if ($noteDetailCode.is(":visible")) {
         $noteDetailCode.hide();
     }
     else {
         if (!codeEditorInitialized) {
-            noteDetailCodeService.show();
+            await noteDetailCodeService.show();
+
+            // because we can't properly scroll only the editor without scrolling the rendering
+            // we limit its height
+            $noteDetailCode.find('.CodeMirror').css('height', '300');
 
             codeEditorInitialized = true;
         }
@@ -32,7 +41,9 @@ $toggleEditButton.click(() => {
             $noteDetailCode.show();
         }
     }
-});
+}
+
+$toggleEditButton.click(toggleEdit);
 
 $renderButton.click(render);
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 1921b151d..9f9fbf81a 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -277,6 +277,7 @@ div.ui-tooltip {
 
 #note-detail-code {
     min-height: 200px;
+    overflow: auto;
 }
 
 #note-detail-render {
@@ -288,6 +289,10 @@ div.ui-tooltip {
     height: auto;
 }
 
+.CodeMirror-scroll {
+    min-height: 200px;
+}
+
 #note-id-display {
     position: absolute;
     right: 10px;