Updated styles for entry page layout.

This removes the need for resize handlers and height calc anymore.
Re-written the component in a functional way.

src/components/EntryEditor.css

@@ -1,26 +1,27 @@
-.entryEditor {
+.root {
+  position: absolute;
+  top: 64px;
+  bottom: 0;
   display: flex;
   flex-direction: column;
-  height: 100%;
 }
 .container {
+  flex: 1;
   display: flex;
-  height: 100%;
 }
 .footer {
+  flex: 0;
   background: #fff;
   height: 45px;
   border-top: 1px solid #e8eae8;
   padding: 10px 20px;
-  z-index: 10;
 }
 .controlPane {
-  width: 50%;
+  flex: 1;
-  max-height: 100%;
   overflow: auto;
   padding: 0 20px;
   border-right: 1px solid #e8eae8;
 }
 .previewPane {
-  width: 50%;
+  flex: 1;
 }

src/components/EntryEditor.js

@@ -4,57 +4,35 @@ import ControlPane from './ControlPane';
 import PreviewPane from './PreviewPane';
 import styles from './EntryEditor.css';
 
-export default class EntryEditor extends React.Component {
+export default function EntryEditor(props) {
-  constructor(props) {
+  const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = props;
-    super(props);
-    this.state = {};
-    this.handleResize = this.handleResize.bind(this);
-  }
 
-  componentDidMount() {
+  return (
-    this.calculateHeight();
+    <div className={styles.root}>
-    window.addEventListener('resize', this.handleResize, false);
-  }
-
-  componengWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  handleResize() {
-    this.calculateHeight();
-  }
-
-  calculateHeight() {
-    const height = window.innerHeight - 54;
-    console.log('setting height to %s', height);
-    this.setState({ height });
-  }
-
-  render() {
-    const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
-    const { height } = this.state;
-
-    return <div className={styles.entryEditor} style={{ height }}>
       <div className={styles.container}>
         <div className={styles.controlPane}>
           <ControlPane
-              collection={collection}
+            collection={collection}
-              entry={entry}
+            entry={entry}
-              getMedia={getMedia}
+            getMedia={getMedia}
-              onChange={onChange}
+            onChange={onChange}
-              onAddMedia={onAddMedia}
+            onAddMedia={onAddMedia}
-              onRemoveMedia={onRemoveMedia}
+            onRemoveMedia={onRemoveMedia}
           />
         </div>
         <div className={styles.previewPane}>
-          <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
+          <PreviewPane
+            collection={collection}
+            entry={entry}
+            getMedia={getMedia}
+          />
         </div>
       </div>
       <div className={styles.footer}>
         <button onClick={onPersist}>Save</button>
       </div>
-    </div>;
+    </div>
-  }
+  );
 }
 
 EntryEditor.propTypes = {

src/components/PreviewPane.css

@@ -1,6 +1,6 @@
 .frame {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   border: none;
   background: #fff;
 }