correctiong layouts for new model

Author: Nes-si

src/components-layout/VerticalLayout.tsx

@@ -33,20 +33,22 @@ export class VerticalLayout extends React.Component<LayoutProps, {}> {
         const { commands, mdeEditorState } = this.props;
 
         return (
-            <div className="vertical-layout">
+            <div className="react-mde-vertical-layout">
                 <MdeToolbar
                     commands={commands}
                     onCommand={this.handleCommand}
                 />
-                <MdeEditor
-                    editorRef={(c) => this.editorRef = c}
-                    onChange={this.handleMdeStateChange}
-                    editorState={mdeEditorState}
-                />
-                <MdePreview
-                    previewRef={(c) => this.previewRef = c}
-                    html={mdeEditorState ? mdeEditorState.html : ""}
-                />
+                <div className="react-mde-content">
+                    <MdeEditor
+                        editorRef={(c) => this.editorRef = c}
+                        onChange={this.handleMdeStateChange}
+                        editorState={mdeEditorState}
+                    />
+                    <MdePreview
+                        previewRef={(c) => this.previewRef = c}
+                        html={mdeEditorState ? mdeEditorState.html : ""}
+                    />
+                </div>
             </div>
         );
     }

src/styles/react-mde-all.scss

@@ -3,4 +3,5 @@
 @import "react-mde-editor";
 @import "react-mde-preview";
 @import "react-mde";
+@import "react-mde-vertical-layout";
 @import "react-mde-no-preview-layout";

src/styles/react-mde-editor.scss

@@ -1,12 +1,8 @@
 @import "variables";
 
 .mde-text {
-  border-width: 1px 0 1px 0;
-  border-style: solid;
-  border-color: $mde-border-color;
 
   .public-DraftEditor-content {
-    box-sizing: border-box;
     width: 100%;
     min-height: $mde-editor-min-height;
     padding: $mde-editor-padding;

src/styles/react-mde-no-preview-layout-all.scss

@@ -7,6 +7,5 @@
 
   .mde-text {
     overflow-y: auto;
-    border-bottom: none;
   }
 }

src/styles/react-mde-no-preview-layout.scss

@@ -1,3 +1,27 @@
+@import "variables";
+
 .react-mde-vertical-layout {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mde-header {
+        border-bottom: 1px solid $mde-border-color;
+    }
+
+    .react-mde-content {
+        display: flex;
+        flex-direction: column;
+
+        .mde-text {
+            overflow-y: auto;
+            height: 50%;
+        }
 
+        .mde-preview {
+            overflow-y: auto;
+            height: 50%;
+            border-top: 1px solid $mde-border-color;
+        }
+    }
 }

src/styles/react-mde-vertical-layout-all.scss

@@ -1,6 +1,10 @@
 @import "variables";
 
+* {
+    box-sizing: border-box;
+}
+
 .react-mde {
-  border: 1px solid $mde-border-color;
-  border-radius: $mde-border-radius
+    border: 1px solid $mde-border-color;
+    border-radius: $mde-border-radius;
 }

src/styles/react-mde-vertical-layout.scss

@@ -3,7 +3,6 @@ $mde-border-color:                  #c8ccd0 !default;
 $mde-button-color:                  #242729 !default;
 $mde-toolbar-padding:               10px !default;
 $mde-editor-min-height:             200px !default;
-$mde-editor-max-height:             200px !default;
 $mde-editor-padding:                10px !default;
 $mde-preview-horizontal-padding:    10px !default;
 $mde-preview-padding:               10px 10px 20px 10px !default;