Fixes #680 by adjusting canvas and iframe layout

- Set the preview canvas to `display:block` to remove vertical spacing
caused by the default value, which was making a full-height canvas cause
vertical scrolling, and the vertical scrollbar caused horizontal
scrolling
- Wrap the preview content in a container with `position:relative` and
no other visible content, so that the full-height iframe excludes the
height of the preview frame header, preventing it from going beyond the
height of the page

client/modules/IDE/pages/IDEView.jsx

@@ -370,6 +370,7 @@ class IDEView extends React.Component {
                 <header className="preview-frame__header">
                   <h2 className="preview-frame__title">Preview</h2>
                 </header>
+                <div className="preview-frame__content">
                   <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
                   </div>
                   <div>
@@ -406,6 +407,7 @@ class IDEView extends React.Component {
                     expandConsole={this.props.expandConsole}
                   />
                 </div>
+              </div>
             </SplitPane>
           </SplitPane>
         </div>

client/modules/IDE/reducers/files.js

@@ -31,6 +31,9 @@ const defaultCSS =
   margin: 0;
   padding: 0;
 }
+canvas {
+  display: block;
+}
 `;
 
 const initialState = () => {

client/styles/components/_preview-frame.scss

@@ -5,6 +5,11 @@
   border-width: 0;
 }
 
+.preview-frame-holder {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 
 .preview-frame-overlay {
   height: 100%;
@@ -37,3 +42,8 @@
   font-size: #{12 / $base-font-size}rem;
   font-weight: normal;
 }
+
+.preview-frame__content {
+  position: relative;
+  flex: 1 1 0;
+}

server/examples.js

@@ -28,6 +28,9 @@ const defaultCSS =
   margin: 0;
   padding: 0;
 }
+canvas {
+  display: block;
+}
 `;
 
 const clientId = process.env.GITHUB_ID;