From 3ba03d709a920ea88ae9ae552f620666f489fd1e Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 5 Jan 2017 14:40:04 -0500
Subject: [PATCH] fixes #241

---
 client/modules/IDE/components/Editor.jsx | 86 ++++++++++++------------
 client/styles/components/_editor.scss    |  9 +++
 client/styles/layout/_ide.scss           |  6 --
 client/styles/vendors/_codemirror.scss   |  1 -
 4 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index 6ce6bdef..014780c1 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -191,48 +191,50 @@ class Editor extends React.Component {
         role="main"
         className={editorSectionClass}
       >
-        <button
-          aria-label="collapse file navigation"
-          className="sidebar__contract"
-          onClick={this.props.collapseSidebar}
-        >
-          <InlineSVG src={leftArrowUrl} />
-        </button>
-        <button
-          aria-label="expand file navigation"
-          className="sidebar__expand"
-          onClick={this.props.expandSidebar}
-        >
-          <InlineSVG src={rightArrowUrl} />
-        </button>
-        <div className="editor__file-name">
-          <span>{this.props.file.name}
-          {this.props.unsavedChanges ? '*' : null}</span>
-          <Timer
-            projectSavedTime={this.props.projectSavedTime}
-          />
-        </div>
-        <button
-          className="editor__options-button"
-          aria-label="editor options"
-          tabIndex="0"
-          ref="optionsButton"
-          onClick={() => {
-            this.refs.optionsButton.focus();
-            this.props.showEditorOptions();
-          }}
-          onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
-        >
-          <InlineSVG src={downArrowUrl} />
-        </button>
-        <ul className="editor__options" title="editor options">
-          <li>
-            <a onClick={this.tidyCode}>Tidy</a>
-          </li>
-          <li>
-            <a onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</a>
-          </li>
-        </ul>
+        <header className="editor__header">
+          <button
+            aria-label="collapse file navigation"
+            className="sidebar__contract"
+            onClick={this.props.collapseSidebar}
+          >
+            <InlineSVG src={leftArrowUrl} />
+          </button>
+          <button
+            aria-label="expand file navigation"
+            className="sidebar__expand"
+            onClick={this.props.expandSidebar}
+          >
+            <InlineSVG src={rightArrowUrl} />
+          </button>
+          <div className="editor__file-name">
+            <span>{this.props.file.name}
+            {this.props.unsavedChanges ? '*' : null}</span>
+            <Timer
+              projectSavedTime={this.props.projectSavedTime}
+            />
+          </div>
+          <button
+            className="editor__options-button"
+            aria-label="editor options"
+            tabIndex="0"
+            ref="optionsButton"
+            onClick={() => {
+              this.refs.optionsButton.focus();
+              this.props.showEditorOptions();
+            }}
+            onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
+          >
+            <InlineSVG src={downArrowUrl} />
+          </button>
+          <ul className="editor__options" title="editor options">
+            <li>
+              <a onClick={this.tidyCode}>Tidy</a>
+            </li>
+            <li>
+              <a onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</a>
+            </li>
+          </ul>
+        </header>
         <div ref="container" className="editor-holder" tabIndex="0">
         </div>
         <EditorAccessibility
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 51f99c05..ad455a00 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -80,6 +80,15 @@
   width: #{48 / $base-font-size}rem;
 }
 
+.editor-holder {
+  height: calc(100% - #{29 / $base-font-size}rem);
+  width: 100%;
+  position: absolute;
+}
+
+.editor__header {
+  height: #{29 / $base-font-size}rem;
+}
 
 .editor__options-button {
   @include themify() {
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index 714a4ca1..1bb76317 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -27,12 +27,6 @@
   min-height: 75vh;
 }
 
-.editor-holder {
-	height: 100%;
-  width: 100%;
-  position: absolute;
-}
-
 .editor-accessibility {
   @extend %hidden-element;
 }
diff --git a/client/styles/vendors/_codemirror.scss b/client/styles/vendors/_codemirror.scss
index 32e0bf5c..1cf66a9f 100644
--- a/client/styles/vendors/_codemirror.scss
+++ b/client/styles/vendors/_codemirror.scss
@@ -270,7 +270,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 .CodeMirror-widget {}
 
 .CodeMirror-code {
-  margin-bottom: 1em;
   outline: none;
 }