Improved markdown mobile editor experience

- Updated styles of codemirror area to be a bit more forefull in taking
up space.
- Added a fullscreen toggle as a backup option.

For #1675

resources/sass/_codemirror.scss

@@ -403,6 +403,7 @@ span.CodeMirror-selectedtext { background: none; }
   left: 0;
   width: 100%;
   height: 100%;
+  margin-bottom: 0;
 }
 
 /**

resources/sass/_forms.scss

@@ -62,6 +62,13 @@
     width: 50%;
     max-width: 50%;
   }
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 2;
+  }
 }
 
 @include smaller-than($m) {
@@ -71,6 +78,7 @@
   #markdown-editor .markdown-editor-wrap {
     width: 100%;
     max-width: 100%;
+    flex-grow: 1;
   }
   #markdown-editor .editor-toolbar {
     padding: 0;
@@ -83,12 +91,15 @@
     border-bottom: 1px solid #DDD;
     display: block;
   }
-  .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
+  .markdown-editor-wrap:not(.active) .editor-toolbar + div,
+  .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
+  .markdown-editor-wrap:not(.active) .markdown-display {
     display: none;
   }
   #markdown-editor .markdown-editor-wrap:not(.active) {
     flex-grow: 0;
     flex: none;
+    min-height: 0;
   }
 }
 

resources/sass/_pages.scss

@@ -20,10 +20,17 @@
   }
 }
 
-body.mce-fullscreen .page-editor .edit-area {
+body.mce-fullscreen .page-editor .edit-area,
+body.markdown-fullscreen .page-editor .edit-area {
   z-index: 12;
 }
 
+body.mce-fullscreen, body.markdown-fullscreen {
+  .page-editor, .flex-fill {
+    overflow: visible;
+  }
+}
+
 @include smaller-than($s) {
   .page-edit-toolbar {
     overflow-x: scroll;