Show runtime error list docked to the bottom of the preview

src/components/ErrorList.jsx

@@ -1,17 +1,22 @@
 var React = require('react');
 var ErrorSublist = require('./ErrorSublist');
+var classnames = require('classnames');
+var get = require('lodash/get');
 
 var ErrorList = React.createClass({
   propTypes: {
     html: React.PropTypes.array.isRequired,
     css: React.PropTypes.array.isRequired,
     javascript: React.PropTypes.array.isRequired,
     onErrorClicked: React.PropTypes.func.isRequired,
+    docked: React.PropTypes.bool,
   },
 
   render: function() {
+    var docked = get(this, 'props.docked', false);
+
     return (
-      <div className="errorList">
+      <div className={classnames('errorList', {'errorList--docked': docked})}>
         <ErrorSublist
           language="html"
           errors={this.props.html}

src/components/Output.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var isEmpty = require('lodash/isEmpty');
 
 var ErrorList = require('./ErrorList');
 var Preview = require('./Preview');
@@ -8,30 +9,61 @@ var Output = React.createClass({
     project: React.PropTypes.object.isRequired,
     hasErrors: React.PropTypes.bool.isRequired,
     errors: React.PropTypes.object.isRequired,
+    runtimeErrors: React.PropTypes.array.isRequired,
     onErrorClicked: React.PropTypes.func.isRequired,
     onRuntimeError: React.PropTypes.func.isRequired,
     clearRuntimeErrors: React.PropTypes.func.isRequired,
   },
 
+  _renderErrorList: function(props) {
+    return (
+      <ErrorList
+        {...props}
+        onErrorClicked={this.props.onErrorClicked}
+      />
+    );
+  },
+
+  _renderPreview: function() {
+    return (
+      <Preview
+        project={this.props.project}
+        onRuntimeError={this.props.onRuntimeError}
+        clearRuntimeErrors={this.props.clearRuntimeErrors}
+      />
+    );
+  },
+
   render: function() {
     if (this.props.hasErrors) {
       return (
-        <ErrorList
-          {...this.props.errors}
-          onErrorClicked={this.props.onErrorClicked}
-        />
+        <div className="environment-rightColumn">
+          {this._renderErrorList(this.props.errors)}
+        </div>
       );
     }
-    if (this.props.project) {
-      return (
-        <Preview
-          project={this.props.project}
-          onRuntimeError={this.props.onRuntimeError}
-          clearRuntimeErrors={this.props.clearRuntimeErrors}
-        />
-      );
+
+    if (!this.props.project) {
+      return null;
     }
-    return null;
+
+    var errorList;
+
+    if (!isEmpty(this.props.runtimeErrors)) {
+      errorList = this._renderErrorList({
+        html: [],
+        css: [],
+        javascript: this.props.runtimeErrors,
+        docked: true,
+      });
+    }
+
+    return (
+      <div className="environment-rightColumn">
+        {this._renderPreview()}
+        {errorList}
+      </div>
+    );
   },
 });
 

src/components/Workspace.jsx

@@ -97,6 +97,7 @@ var Workspace = React.createClass({
             hasErrors={
               !isEmpty(flatten(values(this.props.errors)))
             }
+            runtimeErrors={this.props.runtimeErrors}
             onErrorClicked={this._onErrorClicked}
             onRuntimeError={this._onRuntimeError}
             clearRuntimeErrors={this._clearRuntimeErrors}

src/reducers/runtimeErrors.js

@@ -10,7 +10,10 @@ function runtimeErrors(stateIn, action) {
 
   switch (action.type) {
     case 'RUNTIME_ERROR_ADDED':
-      return state.push(Immutable.fromJS(action.payload.error));
+      return state.push(Immutable.fromJS(action.payload.error)).
+        sortBy(function(error) {
+          return error.get('row');
+        });
 
     case 'RUNTIME_ERRORS_CLEARED':
       return emptyList;

static/application.css

@@ -5,6 +5,10 @@ body {
 .toolbar {
   border-bottom: 1px solid darkgray;
   overflow: hidden;
+  position: absolute;
+  width: 100%;
+  z-index: 20;
+  background-color: white;
 }
 
 .toolbar-showHide {
@@ -49,7 +53,15 @@ body {
 }
 
 .environment {
-  clear: left;
+  box-sizing: border-box;
+  height: 100%;
+  padding-top: 2rem;
+}
+
+.environment-rightColumn {
+  float: right;
+  width: 50%;
+  position: relative;
 }
 
 .editor {
@@ -65,8 +77,6 @@ body {
 }
 
 .preview {
-  float: right;
-  width: 50%;
   height: 100%;
   position: relative;
 }
@@ -93,13 +103,20 @@ body {
 }
 
 .errorList {
-  float: right;
-  width: 50%;
   height: 100%;
+  width: 100%;
   position: relative;
   overflow: scroll;
 }
 
+.errorList--docked {
+  position: absolute;
+  height: auto;
+  overflow: hidden;
+  bottom: 0;
+  border-top: 3px solid darkgray;
+}
+
 .errorList-errorSublist-header {
   background-color: #ffb2b2;
   text-align: center;