From eb3b597272ac3ba94916faa33de5a801a19c5cc2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 13 Jul 2017 23:51:03 -0700
Subject: [PATCH] Fixes #137 - vertical alignment

---
 frontend/components/Editor/Editor.js   | 55 +++++++++++++++-----------
 frontend/components/Editor/Editor.scss |  3 +-
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js
index 26f2d167..1ad4d899 100644
--- a/frontend/components/Editor/Editor.js
+++ b/frontend/components/Editor/Editor.js
@@ -154,32 +154,34 @@ type Props = {
         onDrop={this.handleDrop}
         onDragOver={this.cancelEvent}
         onDragEnter={this.cancelEvent}
+        align="flex-start"
+        justify="center"
         auto
-        column
-        align="center"
       >
-        <HeaderContainer
-          onClick={this.focusAtStart}
-          readOnly={this.props.readOnly}
-        >
-          {this.props.heading}
-        </HeaderContainer>
-        <Toolbar state={this.state.state} onChange={this.onChange} />
-        <Editor
-          key={this.props.starred}
-          ref={ref => (this.editor = ref)}
-          placeholder="Start with a title..."
-          className={cx(styles.editor, { readOnly: this.props.readOnly })}
-          schema={this.schema}
-          plugins={this.plugins}
-          state={this.state.state}
-          onChange={this.onChange}
-          onDocumentChange={this.onDocumentChange}
-          onSave={this.props.onSave}
-          readOnly={this.props.readOnly}
-        />
-        {!this.props.readOnly &&
-          <ClickablePadding onClick={this.focusAtEnd} grow />}
+        <MaxWidth column auto>
+          <HeaderContainer
+            onClick={this.focusAtStart}
+            readOnly={this.props.readOnly}
+          >
+            {this.props.heading}
+          </HeaderContainer>
+          <Toolbar state={this.state.state} onChange={this.onChange} />
+          <Editor
+            key={this.props.starred}
+            ref={ref => (this.editor = ref)}
+            placeholder="Start with a title..."
+            className={cx(styles.editor, { readOnly: this.props.readOnly })}
+            schema={this.schema}
+            plugins={this.plugins}
+            state={this.state.state}
+            onChange={this.onChange}
+            onDocumentChange={this.onDocumentChange}
+            onSave={this.props.onSave}
+            readOnly={this.props.readOnly}
+          />
+          {!this.props.readOnly &&
+            <ClickablePadding onClick={this.focusAtEnd} grow />}
+        </MaxWidth>
       </Flex>
     );
   };
@@ -189,6 +191,11 @@ MarkdownEditor.childContextTypes = {
   starred: PropTypes.bool,
 };
 
+const MaxWidth = styled(Flex)`
+  max-width: 50em;
+  height: 100%;
+`;
+
 const HeaderContainer = styled(Flex).attrs({
   align: 'flex-end',
 })`
diff --git a/frontend/components/Editor/Editor.scss b/frontend/components/Editor/Editor.scss
index d9dd7269..808cd0f0 100644
--- a/frontend/components/Editor/Editor.scss
+++ b/frontend/components/Editor/Editor.scss
@@ -2,8 +2,7 @@
   font-weight: 400;
   font-size: 1em;
   line-height: 1.5em;
-  padding: 0 3em;
-  width: 50em;
+  width: 100%;
   color: #1b2631;
 
   h1,